Material-ui: How do I remove hover background on Menu Items?

[miristoner]

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

How can I remove the background colour on the hover of a menu item, and change the font-color?

[oliviertassinari]

Please submit support requests and questions to StackOverflow using the tag material-ui. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[bradeac]

Even though I support the fact that we shouldn't open an issue in which we ask how to do something, I have to say that the documentation is poor for people who are new to web development. Even though basic usage is covered, when it comes to customizing something, the documentation doesn't help.

material-ui has 30k stars on GitHub, so I expect to find a pretty solid documentation.

[oliviertassinari]

@bradeac What version are you using?

[bradeac]

I am just playing around with the beta (1.0.0-beta.21). This shouldn't matter because the documentation is quite similar for the stable version.

[mbrookes]

@bradeac That isn't at all true, the v1-beta documentation is far more comprehensive, and if you're trying out v1 while following the v0.x docs, you're asking for trouble.

when it comes to customizing something, the documentation doesn't help

Your specific question "how do I customize a component?" is explicitly covered: https://material-ui-next.com/customization/overrides/

material-ui has 30k stars on GitHub, so I expect to find a pretty solid documentation

When it comes to open source, you get what you pay for. If you feel that something is lacking, pull up your sleeves and improve it.

[JGallardo]

@bradeac

the documentation is poor for people who are new to web development

The documentation is poor for anyone.

@mbrookes you are assuming that he doesn't contribute to this project, or blogs and forums related to the topic.

[JGallardo]

A simple fix, not the best way, but it works

<MenuItem
    onMouseEnter={ (e) => e.target.style.backgroundColor= 'transparent' }
    onMouseLeave={ (e) => e.target.style.backgroundColor= 'transparent' }
>

[ajyuan]

The above solution can be made more concise by simply using

<MenuItem style={{ backgroundColor: 'transparent' }}>

[igorilic]

The easiest way:

const StyledMenuItem = withStyles({
  root: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
})(MenuItem);

[mtb24]

@bradeac That isn't at all true, the v1-beta documentation is far more comprehensive, and if you're trying out v1 while following the v0.x docs, you're asking for trouble.

Your specific question "how do I customize a component?" is explicitly covered: https://material-ui-next.com/customization/overrides/

When it comes to open source, you get what you pay for. If you feel that something is lacking, pull up your sleeves and improve it.

@mbrookes your response comes across as elitist and arrogant. Very poor for a member of Material-UI to behave this way

[oliviertassinari]

@mtb24 Did you found a solution to your problem?

People can have good and bad days, I think that the core of Matt's point is that there is an important gap between the value created by OSS projects and the value these projects capture. It's an economic reality. Core maintainers have to account for it when making decisions. Now, it works because other people are contributing, otherwise, we would be a paid first service.