如何更改 material-ui 中选定 MenuItem 的文本颜色？答案

【问题标题】：How do I change the text color of a selected MenuItem in material-ui?如何更改 material-ui 中选定 MenuItem 的文本颜色？
【发布时间】：2020-07-08 04:55:04
【问题描述】：

我到处搜索，但找不到这个问题的答案：如何更改选定或悬停的 MenuItem 的文本颜色（而不是背景）颜色？我知道答案在某处的 useStyles 中，但我尝试了许多不起作用的方法。我试过用 css 来做这件事，但是 material-ui 有它自己的 css 命名约定。

const StyledMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
        paddingTop: "4px",
        paddingBottom: "4px",
        paddingRight: "4px",
        paddingLeft: "4px",
        margin: "4px",
        fontSize: "0.8rem",
        lineHeight: "1",
    },
    searchMenuItem: {
        paddingTop: "2px",
        paddingBottom: "2px",
        selectedTextColor: "#ffffff",
  }
}))(MenuItem);

有人可以指出我必须添加到 useStyles 以将菜单项的选定文本更改为白色吗？

我试过添加类似的东西

&.selected: {
  color: "#ffffff",
}

到 menuitem 类，但它仍然不起作用。任何帮助将不胜感激！

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

像你一样使用 CSS 选择器，但在控制台中检查所选元素上使用了哪个类正如我从文档中看到的，这应该对你有用：

&.Mui-selected: { 颜色：“#ffffff”， }

【讨论】：

谢谢！我在下面使用了另一个答案，但通过检查调试对象尝试了你的答案，你的答案也有效。

【解决方案2】：

基本上，我尝试使用 docs 覆盖 由于某种原因不起作用的 CSS 样式，这里有一个很好的答案可以解决这个问题，但我发现它太长了像这样使用 mateial-ui 很乏味，我认为 CSS 更容易。

所以我采用了不同的方法并尝试了 CSS 的特殊性，并取得了成功。

这里有一个用 react 编写的 jsfiddle（不管你写什么，你只需要 CSS）。

我们的想法是查看开发工具并尝试查看菜单包含哪些类，并使用 CSS 规则充分利用它。

这是一些 CSS 代码：

.horiz-menu div:hover { /* Increase the specificity */
   color: red;
}

还有 JS：

const { Menu, MenuItem, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  render() {
    return (
     <Menu className="horiz-menu">
       <MenuItem primaryText="Home" />
       <MenuItem primaryText="Test Menu 1" />
       <MenuItem primaryText="Test Menu 2" />
       <MenuItem primaryText="About" />
     </Menu>
    );
  }
}

const App = () => (
   <MuiThemeProvider muiTheme={getMuiTheme()}>
   <Example />
   </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
    document.getElementById('container')
);

【讨论】：

嘿纳坦赫尔。这是很好的信息。我也不是 material-ui css 的忠实粉丝，因此了解一个直接的 css 有助于将来绕过这些东西。谢谢！

【解决方案3】：

如果其他人在更改所选菜单项的文本颜色时遇到问题，您需要使用 &hover mateial-ui 命令。

例如，要让所选菜单项在深色背景中显示白色文本，请执行以下操作（当主主题具有所选项目的深色背景时）：

const StyledMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white, <===ADD THIS LINE
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
    }
}))(MenuItem);

【讨论】：