材质UI MenuItem覆盖ListItem类

Question

悬停并选择时，我试图覆盖MenuItem的样式。 据我了解，解决方案肯定是使用makeStyles创建自定义类。

 <MenuIte
            classes={{ root: classes.menuItem ,selected:classes.menuItemSelected }}

          >
            {"SomeText"}
          </MenuItem>

export default makeStyles(theme => ({
   menuItemSelected: {
        "&:hover": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    },
    menuItem: {
        fontSize: 12,
        paddingTop: "4px",
        paddingBottom: "4px",
        "&:hover, &:focus": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    }
}));

但是我的自定义类会被.MuiListItem-root.Mui-selected覆盖

因此，我了解优先级与特异性直接相关。 我的问题是在这种情况下如何使用makestyle定制类添加更多的特异性。 代码框

https://codesandbox.io/s/material-demo-jnzw7

Answer 1

export default makeStyles(theme => ({
   menuItemSelected: {
        "&:hover": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    },
    menuItem: {
        fontSize: 12,
        paddingTop: "4px",
        paddingBottom: "4px",
        "&:hover, &:focus": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    }
}), { name 'SimpleListMenu' });

您需要命名。

https://codesandbox.io/s/material-demo-t7589

您可以读出https://material-ui.com/styles/advanced/#with-material-ui-core