Question

我在我的项目中使用material-ui，并且我在一个黑色背景的div中有一个Checkbox。但它看起来不太好，因为Checkbox也是黑色的。如何将复选框的颜色从黑色更改为另一种颜色？

Answer 1

您需要使用iconStyle，但由于复选框图标是SVG图片，因此您需要使用fill代替color来设置颜色：

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

Answer 2

这是一个古老的问题，但是对于那些使用材料1.2的人来说。

iconStyle对我不起作用。

但是，我是通过覆盖现有主题并将“复选框”组件包装到一个新的主题中来实现的。

import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

现在，您可以在渲染功能中使用“ CustomCheckbox”组件。

然后选中，该颜色应为您分配的颜色。

enter image description here

Answer 3

可能是两种方法。

＆＃34;本地＆＃34;

CheckBox包含道具labelStyle和iconStyle。我想你可以从调整它们开始：

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

我不确定它是否足够，所以你可能需要和其他＆＃34; Style＆＃34; props of Checkbox。查看所有具有＆＃34;样式＆＃34;在名字中。

创建主题

您可以设置一些仅影响复选框的主题设置：

您可以使用storybook-addon-material-ui demo page创建主题并下载。

Answer 4

对我来说，这是通过添加root和选中的分类来解决的

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

并将其传递给复选框类

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

希望这对其他人有帮助

Answer 5

对我来说，我只需要更改表格标题复选框，这对我有用

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

Answer 6

这是您的操作方式：

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />

Answer 7

您可以使用 material ui theme。

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

got it from here

Answer 8

该复选框具有名为color的属性，其值可以为默认或主要或次要，例如：

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

您可以通过覆盖它们的类Css来以简单的方式更改主色和辅助色，对于主色为.MuiCheckbox-colorPrimary，对于辅助色为.MuiCheckbox-colorSecondary

因此您可以在CSS中进行编辑：.MuiCheckbox-colorPrimary { color : 'yourColor'}

Answer 9

这对我来说在Material-ui 4.1上很有效。在@api_view(['POST', ]) @permission_classes(()) def doctor_registration_view(request): if request.method == 'POST': serializer = DoctorSerializer(data=request.data) data = {} if serializer.is_valid(): doctor = serializer.save() else: data = serializer.errors return Response(data)上将color属性定义为= "primary"

Checkbox

使用原色覆盖material-ui的样式。将此条目添加到一个css文件中，该文件将导入到呈现<Checkbox color="primary"...>的javascript代码中。

Checkbox

Answer 10

您可以为选中和未选中条件分配自定义图标，然后设置复选框图标的样式例如： <Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

Answer 11

对于以后来回答的任何人，
如果 Found the answer: $(document).on("click", "#submit_comment", function() { 和 labelStyle 不适合您
并且您希望稍后能够更改颜色，请尝试以下操作：

iconStyle

如何在材料中自定义复选框的颜色-ui

11 个答案: