score:17
the style functions are not automatically supported by the grid
component.
the easiest way to leverage the style functions is to use the box component. the box
component makes all of the style functions (such as display) available. the box
component has a component prop (which defaults to div
) to support using box
to add style functions to another component.
the grid
component similarly has a component prop, so you can either have a grid
that delegates its rendering to a box
or a box
that delegates to a grid
.
the example below (based on your code) shows both ways of using box
and grid
together.
import react from "react";
import reactdom from "react-dom";
import grid from "@material-ui/core/grid";
import box from "@material-ui/core/box";
import { makestyles } from "@material-ui/core/styles";
const usestyles = makestyles({
griditem: {
border: "1px solid red"
}
});
function app() {
const classes = usestyles();
return (
<grid
container
spacing={1}
direction="row"
justify="center"
alignitems="center"
>
<grid classname={classes.griditem} item xs={12} lg={6}>
<span>xx</span>
</grid>
<box
component={grid}
classname={classes.griditem}
item
xs={3}
display={{ xs: "none", lg: "block" }}
>
<span>yy</span>
</box>
<grid
component={box}
classname={classes.griditem}
item
xs={3}
display={{ xs: "none", lg: "block" }}
>
<span>zz</span>
</grid>
</grid>
);
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
score:-1
grid items just setup your layout.
they don't actually display anything. the mui display option is for hiding specific elements.
try this:
function crudview() {
return (
<grid
container
spacing={1}
direction="row"
justify="center"
alignitems="center"
>
<grid item xs={12} lg={6}>
<span>xx</span>
</grid>
//removed from the below grid item
<grid item xs={12} lg={6}>
<span display={{ xs: "none", lg: "block" }}>yy</span>
</grid>
</grid>
);
}
that will hide the individual span
element even though the grid is still there.
score:2
in mui v5, you can change the display
value directly on grid
without having to use box
anymore:
<grid
item
xs={3}
sx={{
display: { xs: "none", lg: "block" }
}}
>
<span>yy</span>
</grid>
score:10
material ui exposes a <hidden>
component to achieve this. just wrap component you want to hide for specific screen size:
<hidden xsdown >
<p>hide me on xs view port width.</p>
</hidden>
you can find more examples in the documentation.
Source: stackoverflow.com
Related Query
- Material-UI Grid does not hide when using display
- Material UI v5 - Property 'spacing' does not exist on type 'DefaultTheme' when using a custom theme
- Typescript and eslint issue when using styled-components and Material UI: `React does not recognize the `showText` prop on a DOM element`
- HintText of a TextField component in Material UI does not hide its value when start typing into the field
- Material UI datePicker does not focus to a selected date when using initialFocusedDate
- Material UI data grid filter not working when using renderCell in a field
- Multiple validations on a form element does not work when using material ui
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- Netlify does not recognize the URL params when using react-router-dom
- Typescript error "Property does not exist on type 'JSX.IntrinsicElements'" when using native web component
- Canvas element does not resize when using ReactJS and PaperJS together
- React-navigation: header does not show up when using bottom tab navigator
- How to fix the error 'alpha' is not exported from '@material-ui/core/styles' when using Skeleton in Material UI
- JSDoc does not work in local package in a Lerna monorepo project using webpack dev server but works when released to package registry
- Property 'theme' does not exist when using typescript
- Disable does not work for checkbox when using this.props
- React Material UI OutlinedInput does not display error message
- Material UI TextField label does not move up when the value for TextField is set porgramatically
- AgGridReact - Grid does not update when isRowSelectable changes
- How to attach a compound component when using React forward ref (property does not exist on forwardRefExoticComponent)
- How to hide a div when input or child is not focused using React?
- DatePicker does not display the date in input when editing
- Prop does not exist on type 'PropsWithChildren' when trying to dispatch the action using react-redux
- this.context does not contain router when using react-router
- React Context "Property 'state' does not exist" when using useContext() on Context consumer
- Animation not triggering when using material UI
- Property 'then' does not exist on type 'RelayObservable<unknown>'. when I try to fetch data using relay in react. I don't know why this error come
- React Bootstrap select option renders and does not display first available option when list renewed
- Nested grid containers and items are not fitting in the screen using material UI react
- Component does not display when clicking the navBar button
More Query from same tag
- Fit parent height for Table in Material UI?
- Handling blur click and focus events of dropdown input suggestion lists in react
- Run a fetch call onLoad - React
- Custom react hook to for text field seems to be broken
- two api response render in table body with react
- How to add facebook comment plugin in Gatsby?
- How to get the phone number not the country code in MuiPhoneNumber in React
- Converting Object Promise to String in Javascript
- Why does @chakra-ui/gatsby-plugin crashes gatsby?
- Axios POST request returns 404 error when sending to Node.js API
- React - run dev-server
- babel es5 to es6 converting less extension to css on imports
- React + Firebase Empty Array
- Cant render object value
- How to apply code highlights within markdown-to-jsx package in react?
- Fabric JS; How to make an object unmovable until the object is "fully" clicked (mouse down and mouse up)
- How to mock a module in Jest
- Cant access object passed to component React
- I am trying to dispatch a action but getting this error: " Unhandled Rejection (TypeError): Cannot read property 'type' of undefined"
- Submit Final Form from modal
- how to give string value on y axis in rechart
- Execute GetServerSideProps each time i click on a button
- mapStateToProps doesn't change state
- how can I pass a target url address to a form in react.js?
- React + Redux, how can I add or omit an object from a specific property in a reducer
- ReactJS looping executeAction
- Uploading Multiple Images in React and Redux
- How can I use Next.js redirects?
- Swiperjs. How can I pass custom props to SwiperSlide and get it onSlideChange function?
- Show All Users in Meteor React Client