Question

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

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

Answer 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>
    );
}

Answer 2

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

为<CheckBox/>组件提供原色或辅助色。

<CheckBox 
color = "primary"
/>

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

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

Colorize material-ui复选框

2 个答案: