reactjs – 覆盖材料中的类 – ui v1.0.0-beta-1显示“提供给类属性的密钥未实现”警告

2024年1月25日 226次阅读

我正在尝试使用
overriding by classes方法覆盖Material-UI v1组件的样式.

当我尝试覆盖嵌套属性时,例如根键上的：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属性,Button显然不支持该属性.要解决此问题,请确保只将支持的密钥传递给Button,例如：

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