Last Updated: 2024-04-18

How to disable container maxWidth

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

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">

or use ListItemButton instead of ListItem

How to Customize a Component

const CustomizedListItemButton = (props) => (
      fontSize: '1.1rem',
      '& a': {
        textDecoration: 'underline',

To change styles of a child, use &:

 '& a': {
  textDecoration: 'none',

How to use @media query?

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

    '@media (max-width: 599px)': {
      padding: '0',

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>