css - 如何在材质 ui 中覆盖处于禁用状态的复选框颜色（框和字体）？

问题描述

在 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/>

标签： cssreactjsmaterial-ui

您可以使用与状态完全相同的方法覆盖状态的默认样式：disabledchecked

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);

css - 如何在材质 ui 中覆盖处于禁用状态的复选框颜色（框和字体）？

问题描述

解决方案

推荐阅读