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

I have searched everywhere, but I can't find an answer to this question:How do I change the text

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.palettemon.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!

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.mon.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!

Share Improve this question asked Jul 8, 2020 at 4:55 Andrew HAndrew H 4632 gold badges9 silver badges27 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

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", }

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

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

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.mon.white, <===ADD THIS LINE
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.mon.white
            }
        },
    }
}))(MenuItem);

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744247661a4565015.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信