如何在 material ui REACTjs 的 menuItem 中覆盖选定的类？

Question

你好，我遇到了一个问题，我无法覆盖在选择 menuItem 时显示正确样式的类：这是我的代码：

       <MenuItem component={Link} to="/Acceuil" 
        className={{root:classes.menuItem ,selected:classes.selected}} 
           selected={pathname === "/Acceuil"} >
              <ListItemIcon>
                  <Icon className={classes.icon} >
                      insert_drive_file
                   </Icon>
               </ListItemIcon>
            Gestion Commandes
        </MenuItem>

这是类常量：

      Const classes = theme => ({
       menuItem: {
         fontStyle:'bold',
         backgroundColor: 'white',
         width: '88%',
      '&:active':{
        borderLeft: '4px solid #51bcda',
        backgroundColor: "-webkit-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75), -moz-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),   box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),",
        },
       selected:{
       backgroundColor:'red !important' 
       } 
       });

谢谢你帮助我^^

Answer 1

要了解如何以适当的特异性设置样式，您需要查看 ListItem source code（MenuItem 将其大部分样式委托给 ListItem）。

以下是 selected 状态的 ListItem 样式的相关部分：

export const styles = theme => ({
  root: {
    '&$selected, &$selected:hover, &$selected:focus': {
      backgroundColor: theme.palette.action.selected,
    },
  },
  /* Styles applied to the root element if `selected={true}`. */
  selected: {},
});

下面我提供了一个覆盖所选 MenuItem 样式的示例以及工作 CodeSandbox based on the Selected menus demo。

const styles = theme => ({
  menuItemRoot: {
    "&$menuItemSelected, &$menuItemSelected:focus, &$menuItemSelected:hover": {
      backgroundColor: "red"
    }
  },
  menuItemSelected: {}
});
...
            <MenuItem
              classes={{
                root: classes.menuItemRoot,
                selected: classes.menuItemSelected
              }}
...

这里有一个类似的 question/answer 用于不同的 Material-UI 组件：

如何在 material ui REACTjs 的 menuItem 中覆盖选定的类？

How to overried the selected classes in menuItem in material ui REACTjs?

css

reactjs

material-ui

menuitem

styling

如何在 material ui REACTjs 的 menuItem 中覆盖选定的 类？

How to overried the selected classes in menuItem in material ui REACTjs?

css

reactjs

material-ui

menuitem

styling

如何在 material ui REACTjs 的 menuItem 中覆盖选定的类？