我正在尝试使用 overriding by classes 覆盖 Material-UI v1 组件的样式方法。
当我尝试覆盖嵌套属性时,例如 root 键上的 :hover 伪类,我收到以下警告:
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:
参见示例:
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);
或者在https://codesandbox.io/s/gRgGrYvr查看它的实际情况
由于示例按钮在悬停时确实会获得不同的背景颜色,我想知道这是否是 Material-UI 中的问题,或者我是否尚未完全掌握如何覆盖其样式。
最佳答案
感谢 @kybarg 在 Material-UI's Gitter 上帮助我我知道如何解决这个问题,请参阅 CodeSandbox他是为了帮助我。
出现警告是因为根键旁边的classes属性还包含一个.MyButton-root-p:hover
属性,按钮显然不支持该属性。要解决此问题,请确保仅将受支持的键传递给按钮,例如:
export default withStyles(buttonStyle)(({ classes, ...restProps}) => (
<Button classes={{ root: classes.root }} {...restProps} />
));
关于reactjs - 使用 Material-ui v1.0.0-beta-1 中的类覆盖显示 "the key provided to the classes property is not implemented"警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45284597/