Overriding with classes in material-ui v1.0.0-beta-1 shows “the key provided to the classes property is not implemented” warning

问题:

I'm trying to override the styling of Material-UI v1 components, using the overriding by classes method.

When I try to override a nested property, for example the :hover pseudo class on the root key I get the following warning:

Warning: Material-UI: the key `.MyButton-root-w:hover` provided to the classes property object is not implemented in Button. You can only overrides one of the following:  

See for example:

import React from "react"; import { createStyleSheet, withStyles } from "material-ui/styles"; import Button from "material-ui/Button";  const buttonStyle = createStyleSheet("MyButton", {   root: {     backgroundColor: "#f99",     "&:hover": {       backgroundColor: "#99f"     }   } });  export default withStyles(buttonStyle)(Button); 

Or see it in action at https://codesandbox.io/s/gRgGrYvr

As the example button does get a different background color when hovering, I was wondering if this is an issue in Material-UI or if I don't yet fully grasp how to override its styling.

回答1:

Thanks to @kybarg who helped me on Material-UI's Gitter I know how to fix this, see the CodeSandbox he made to help me.

The warning occurs because the classes property will next to the root key also contain a .MyButton-root-p:hover property which the Button obviously doesn't support. To solve this make sure you only pass the supported keys to the Button, for example by:

export default withStyles(buttonStyle)(({ classes, ...restProps}) => (   <Button classes={{ root: classes.root }} {...restProps} /> )); 

文章来源: Overriding with classes in material-ui v1.0.0-beta-1 shows “the key provided to the classes property is not implemented” warning