Question

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

Answer 1

感谢@kybarg帮助我Material-UI's Gitter我知道如何解决这个问题，请参阅他为帮助我做的CodeSandbox。

发生警告是因为根属性旁边的classes属性还包含一个{<1}}属性，Button 显然不支持该属性。要解决此问题，请确保仅将支持的键传递给Button，例如：

.MyButton-root-p:hover

覆盖材料-ui v1.0.0-beta-1中的类显示＆＃34;提供给classes属性的密钥未实现＆＃34;警告

1 个答案: