在 MUI v5 中设置“root”的样式

Question

例如我正在尝试设计风格ListItem

我可以找到很多使用的示例sx（全部使用 Box 作为示例），但是当我尝试如下所示的操作时，它不起作用

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

谢谢。

更新

这个尝试也行不通

类参考：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>

Answer 1

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
    }
  }}
/>

它类似于 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}

现场演示