css - 如何在 Material ui 中覆盖处于禁用状态的复选框颜色(框和字体)？

Question

在 Material UI v4.9.12 中，我可以创建一个具有(固定)不同颜色的自定义复选框:

const GreenCheckbox = withStyles({
  root: {
    color: green[400],
    '&$checked': {
        color: green[600],
    },
  },
  checked: {},
})((props) => {
    return <Checkbox {...props} />
  }
)

但这不会改变字体颜色，只会在未禁用复选框时设置颜色。

我怎样才能做到这两点？我必须覆盖什么？

到目前为止，我只设法用内联样式覆盖了图标颜色:

<GreenCheckbox style={{color: green[600]}} onChange={cb} checked={checked} disabled/>

Answer 1

您可以覆盖 default styles对于 disabled 状态，使用与用于 checked 状态完全相同的方法:

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import green from "@material-ui/core/colors/green";

const GreenCheckbox = withStyles({
  root: {
    color: green[400],
    "&$checked": {
      color: green[600]
    },
    "&$disabled": {
      color: green[200]
    }
  },
  checked: {},
  disabled: {}
})(Checkbox);

function App() {
  return (
    <div className="App">
      <GreenCheckbox />
      <GreenCheckbox disabled />
      <GreenCheckbox checked disabled />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

相关回答:

• Change the tick color in MuiCheckbox material UI
• Is there a way to create a ColoredCheckbox component?