我正在尝试创建一个可重复使用的material-ui彩色复选框组件,
您将十六进制颜色传递给组件,它会影响复选框颜色。
到目前为止我已经明白了,但我想不出一种将颜色传递给 withStyles 的方法......
const WhiteCheckbox = withStyles({
root: {
color: '#fff',
'&$checked': {
color: '#fff',
},
},
checked: {},
})(props => <Checkbox color="default" {...props} />);
如果您有任何使其发挥作用的提示,请先致谢。
您可以使用样式中的 props值的函数.
以下是如何实现此功能的工作示例:
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
因为那是默认复选框行为.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)