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.