使用 material-ui v1.0.0-beta-1 中的类覆盖显示“未实现提供给 classes 属性的键”警告

IT技术 reactjs material-ui
2021-04-25 17:35:24

我正在尝试使用覆盖类方法覆盖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 中的问题,或者我是否还没有完全掌握如何覆盖其样式。

1个回答

感谢 @kybarg 在Material-UI 的 Gitter上帮助我,我知道如何解决这个问题,请参阅他为帮助我而制作CodeSandbox

出现警告是因为在根键旁边的 classes 属性还包含.MyButton-root-p:hoverButton显然不支持属性要解决此问题,请确保仅将支持的键传递给 Button,例如:

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