用material-ui v1.0.0-beta-1中的类覆盖表示“未实现提供给classes属性的键".警告 [英] Overriding with classes in material-ui v1.0.0-beta-1 shows "the key provided to the classes property is not implemented" warning
问题描述
我正在尝试使用按类覆盖方法.
当我尝试覆盖嵌套属性时,例如 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帮助我完成了材料UI的问题我知道如何解决此问题,请参阅他制作的 CodeSandbox 帮帮我.
发生警告是因为根键旁边的classes属性还将包含一个.MyButton-root-p:hover
属性,而按钮显然显然不支持该属性.要解决此问题,请确保仅将受支持的键传递给按钮,例如:
export default withStyles(buttonStyle)(({ classes, ...restProps}) => (
<Button classes={{ root: classes.root }} {...restProps} />
));
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.
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} />
));
这篇关于用material-ui v1.0.0-beta-1中的类覆盖表示“未实现提供给classes属性的键".警告的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!