Есть ли способ создать компонент ColoredCheckbox?

Question

Я пытаюсь создать компонент флажка для многоразового использования материала-цвета, вы передаете компоненту шестнадцатеричный цвет, и он влияет на цвет флажка.

Я получил это до сих пор, но не могу думатьспособа передать цвет в withStyles ...

const WhiteCheckbox = withStyles({
  root: {
    color: '#fff',
    '&$checked': {
      color: '#fff',
    },
  },
  checked: {},
})(props => <Checkbox color="default" {...props} />);

Заранее спасибо, если у вас есть какие-либо советы, чтобы заставить его работать.

Answer 1

Вы можете использовать реквизиты в стилях, используя функцию для значения .

Вот рабочий пример того, как вы могли бы реализовать это:

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

const ColoredCheckbox = withStyles(theme => ({
  root: {
    color: ({ color }) => (color ? color : theme.palette.text.secondary),
    "&$checked": {
      color: ({ color }) => (color ? color : theme.palette.text.secondary)
    }
  },
  checked: () => ({})
}))(({ color, ...other }) => <Checkbox color="default" {...other} />);

function App() {
  return (
    <div className="App">
      <ColoredCheckbox />
      <ColoredCheckbox color="red" />
      <ColoredCheckbox color="green" />
    </div>
  );
}

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

По умолчанию цвет равен theme.palette.text.secondary, поскольку это поведение флажка по умолчанию .