Как переопределить цвет флажка (поле и шрифт) в отключенном состоянии в пользовательском интерфейсе материала?

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

Вы можете переопределить стили по умолчанию для состояния 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);

Связанные ответы:

• Изменить цвет галочки в пользовательском интерфейсе материала MuiCheckbox
• Есть ли способ создать компонент ColoredCheckbox?