复选框：更改根本样式

Question

如何在复选框中更改根样式。这行不通。

 <CheckboxItem
                      onChange={()}
                      checked={isChecked}
                      label="Show Checkbox"
                      classes={{ root: classes.checkbox }}
                    />

className={{ root: classes.checkbox }}

也正在错误。谢谢。

Answer 1

您可以使用sx属性（例如文档建议）进行此操作：

<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800],
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>

另一种方法可以创建样式的组件：

const CheckBoxStyled = styled(Checkbox)`
  root: {
    "&$checked": {
      "& .MuiIconButton-label": {
        color: "red",
        ...
      },
      ...
    }
  },
`;

<CheckBoxStyled checked value="TestValue" onChange={handleChange}/>

如果以上不是很大的帮助，请您提供更多有关您想要的信息的信息更改和MUI的版本，可能会给您发送一个有效的示例。