有没有办法创建ColoredCheckbox组件？

Question

我正在尝试创建一个可重复使用的材质-ui彩色复选框， 您将十六进制颜色传递给组件，它会影响复选框的颜色。

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

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

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

Answer 1

您可以使用function for the value在样式中利用道具。

以下是如何实现此功能的有效示例：

hypot

这默认将颜色设置为sqrt(x*x + y*y)，因为它是default Checkbox behavior。