有没有一种方法可以创建ColoredCheckbox组件? [英] Is there a way to create a ColoredCheckbox component?

问题描述

我正在尝试创建一个可重用的，具有用户界面颜色的ui复选框组件， 您将十六进制颜色传递给组件，它会影响复选框的颜色.

I'm trying to create a reusuable material-ui colored checkbox component, you pass a hex color to the component and it affects the checkbox's color.

到目前为止，我已经知道了，但是我想不出一种将颜色传递给withStyles的方法...

I got this so far but i can't think of a way to pass a color to withStyles...

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

如果有任何提示可以使其工作，请先感谢.

Thanks in advance if you have any tip to make it work.

推荐答案

您可以使用以下是如何实现此功能的有效示例:

Here is a working example of how you could implement this:

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，因为它是

This defaults the color to theme.palette.text.secondary since that is the default Checkbox behavior.

这篇关于有没有一种方法可以创建ColoredCheckbox组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！