着色材质-ui 复选框答案

【问题标题】：Colorize material-ui checkbox着色材质-ui 复选框
【发布时间】：2017-11-09 13:12:18
【问题描述】：

使用material-ui.com-framework 时如何更改活动复选框的背景颜色？ style-property 对复选框的 svg-color 没有影响。

         <Checkbox
          label="Simple"
         style={styles.checkbox}
       />

【问题讨论】：

要编辑 Checkbox 中的图标，请改用 iconStyle 属性。我认为您不能使用常规内联样式来定位 svg 填充属性。因此，我建议您考虑使用 styled-components 来为您提供更多自定义组件的能力。

标签： reactjs material-design material-ui

【解决方案1】：

根据docs，您可以使用主题以这种方式设置组件的样式。

您可以使用预定义的主题，或创建custom theme。例如，实现你想要的可以很简单：

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Checkbox from 'material-ui/Checkbox';

const myTheme = getMuiTheme({
    checkbox: { checkedColor: 'red' }
});

然后，在渲染函数中，您可以使用themeProvider 并传入您的自定义主题。这将使用您更改的键扩展基本主题。

render() {
    return (
        <MuiThemeProvider theme={myTheme}>
            <Checkbox />
        </MuiThemeProvider>
    );
}

【讨论】：

【解决方案2】：

如果有人仍在寻找解决方案，这就是它的完成方式。

为<CheckBox/> 组件赋予主要或次要颜色。

<CheckBox 
color = "primary"
/>

使用 css 更改材质 ui 的原色：

.my-checkbox-wrapper .MuiCheckbox-colorPrimary{
color: 'green';
}

【讨论】：