MUI

Last Updated: 2022-03-27

How to disable container maxWidth

<Container maxWidth={false} sx={{ maxWidth: '960px' }}>
  //...
</Container>

How to Change CardHeader font size

<CardHeader title="..." titleTypographyProps={{ variant: 'h6' }} />

How to add a link to List Item

<ListItem component="a" href="/path/to">
  <ListItemText>List1</ListItemText>
</ListItem>

or use ListItemButton instead of ListItem

How to Customize a Component

const CustomizedListItemButton = (props) => (
  <ListItemButton
    divider
    component="a"
    sx={{
      fontSize: '1.1rem',
      '& a': {
        textDecoration: 'underline',
      },
    }}
    {...props}
  ></ListItemButton>
);

How to use @media query?

Set in sx, e.g. set padding to 0 on small screens:

<Box
  sx={{
    '@media (max-width: 599px)': {
      padding: '0',
    },
  }}
></Box>

How to change grid order?

For example, show the sidebar at the end of the page on x-small screens, while on the left on big screens, use order:

<Grid container>
  <Grid item xs={12} sm={3} order={{ xs: 2, sm: 1 }}></Grid>
  <Grid item xs={12} sm={9} order={{ xs: 1, sm: 2 }}></Grid>
</Grid>