Material UI - 全球主题的多个 css 类答案

【问题标题】：Material UI - Multiple css classes on global themeMaterial UI - 全球主题的多个 css 类
【发布时间】：2020-12-09 00:59:55
【问题描述】：

我是第一次使用带有 React 的 Material UI。我想改变我的全局主题，但是我想改变的有两个类：

.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

如何使用createMuiTheme 选择它们？我试过这个：

createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        Mui: {
          selected: {
            backgroundColor: "black",
            "&:hover": {
              backgroundColor: "blue",
            },
          },
        },
      },
    },
  }
})

提前谢谢你

【问题讨论】：

那样不行，见material-ui.com/api/list-item/#css有一个选定的规则名称。

标签： css reactjs material-ui

【解决方案1】：

正确的语法如下：

const theme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&.Mui-selected": {
          backgroundColor: "black",
          "&:hover": {
            backgroundColor: "blue"
          }
        }
      }
    }
  }
});

也相当于做：

const theme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          backgroundColor: "black",
          "&:hover": {
            backgroundColor: "blue"
          }
        }
      }
    }
  }
});

【讨论】：

【解决方案2】：

试试这段代码

createMuiTheme({
    overrides: {
        MuiListItem: {
            root: {
                '&$selected': {
                    backgroundColor: "black"
                },
                '&$selected:hover'{
                    backgroundColor: "blue"
                }
            },
        },
    },
})

看看这个response

【讨论】：

【解决方案3】：

Material UI 添加了全局 Mui-selected 类，以便更轻松地全局更改特定元素。

但是，您应该只根据文档定位 MuiListItem 类，如下所示：

createMuiTheme({
  overrides: {
    MuiListItem: {
      selected: {
        backgroundColor: "black",
        "&:hover": {
          backgroundColor: "blue",
        },
      },
    },
  }
})

我发现这在当前版本的 Material UI 中不再起作用。在 ListItem 组件的source code 中，现在定义如下：

  root: {
    '&$selected, &$selected:hover': {
      backgroundColor: theme.palette.action.selected,
    },
    ...
  }

【讨论】：