如何更改 Material-UI 的自动完成中的复选框颜色？

Question

我正在使用 Material-UI 提供的 React 和 Autocomplete。我无法更改 Checkbox 组件的颜色。这是我的代码：

<Checkbox
  icon={icon}
  checkedIcon={checkedIcon}
  style={{ marginRight: 20 }}
  value={options}
  name="isChecked"
  color='primary'
  checked={state.isChecked}
  onChange={updateHandler}
/>

我也尝试过使用 className 但它没有用。仅当复选框位于 Autocomplete.

内时才会发生

Answer 1

我假设您使用的是 this 示例中的代码。如果是这样，问题是您正在为 Checkbox 使用自定义图标组件，您需要在传入 checkedIcon 属性的图标组件上应用 css 样式：

const useStyles = makeStyles({
  root: {
    color: green[400],
    "&$checked": {
      color: green[600]
    }
  }
});

function App() {
  const classes = useStyles();

  return (
    <Autocomplete
      options={options}
      getOptionLabel={(option) => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
            // change to this line below to fix the issue
            checkedIcon={<CheckBoxIcon fontSize="small" className={classes.root} />}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      renderInput={(params) => <TextField {...params} label="Combo box" />}
    />
  );
}

如何更改 Material-UI 的自动完成中的复选框颜色？

how can I change the Checkbox color in Material-UI's Autocomplete?

reactjs

autocomplete

material-ui

现场演示