How do I change the text color of a selected MenuItem in material-ui?

Question

I have searched everywhere, but I can't find an answer to this question: How do I change the text color (not the background) color of a selected or hovered MenuItem? I KNOW the answer is in the useStyles somewhere, but I've tried a number of things that don't work. I've tried using css to do this, but material-ui has it's own css naming conventions.

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);

Can someone point out what I have to add to useStyles to change the selected text of a menuitem to white?

I've tried adding things like

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

to menuitem classes but it still doesn't work. Any help would be greatly appreciated!

Answer 1

use a CSS selector as you did, but check in the console which class exactly is used on selected elements as I see from the documentation, this should work for you:

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

Answer 2

Basically, I tried the docs to override the CSS styles which didn't work for some reason , there's a good answer here that has the solution for that but I find it too long and tedious to work with mateial-ui like that, I think CSS is much easier.

so I went with a different approach and tried specificity of CSS which resulted in success.

here's a jsfiddle written in react (doesn't really matter what you write it in, you just need the CSS).

The idea was to look in the dev tools and try and see what classes the menu is holding and make the most of it with CSS rules.

Here's some CSS code:

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

And the 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')
);

Answer 3

For anyone else that has a problem changing the text color of a selected menu item, you nee to use the &hover mateial-ui command.

For instance, to have a white text in a dark background selected menu item do this (when the primary theme has a dark background color for selected items):

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);