Styling the 'root' in MUI v5

user_11481590 0
Viewed 2639

For example I am trying to style ListItem

I can find a lot of example using the sx (all use Box as example ) but when I try something like below, it does not work

<ListItem button onClick={handleClick}
  sx={{
    root: {
      //
    }
  }}
>

Thank you.

Update

This attempt also does not work

classes reference:https://github.com/mui-org/material-ui/blob/v4.9.12/packages/material-ui/src/ListItem/ListItem.js#L29

const MyListItem = styled(ListItem)({
  root: {
    width: "10%",
  },
  button: {
    "&:hover": {
      textDecoration: "none",
      backgroundColor: "blue",
      "@media (hover: none)": {
        backgroundColor: "transparent",
      },
    },
  },
});


  <MyListItem button onClick={handleClick}>
       //content
      </MyListItem>
material-ui reactjs
1 Answers

This is how you style the root component using sx prop

<ListItem
  sx={{
    // your root styles
    "&": {
      // your root styles but with higher CSS specificity
    },
    "&.MuiListItem-root": {
      // your root styles but with even higher CSS specificity
    }
  }}
/>

It's similar to the older method in v4:

const useStyles = makeStyles({
  root: {
    // your root styles
    "&": {
      // your root styles but with higher CSS specificity
    },
    "&.MuiListItem-root": {
      // your root styles but with even higher CSS specificity
    }
  }
});

<ListItem className={classes.root}

Live Demo

Codesandbox Demo

user_94494260
Related