覆盖 MUI 芯片删除图标颜色

Question

我正在尝试为Chip组件 (MUI v5) 的deleteIcon提供自定义颜色。 如我所见，我的样式被.css-inlzrk-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon覆盖，但我无法覆盖它。 我不想提供内联样式（例如<Cancel style={{color: 'blue'}} /> ）。

import * as React from "react";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import { makeStyles } from "@mui/styles";

import Cancel from "@mui/icons-material/Cancel";

export default function DeleteableChips() {
  const classes = makeStyles((theme) => ({
    icon: {
      color: "blue"
    }
  }))();

  const handleDelete = () => {
    console.info("You clicked the delete icon.");
  };

  return (
    <Stack direction="row" spacing={1}>
      <Chip
        className={{ deleteIcon: classes.deleteIcon }}
        label="Deletable"
        onDelete={handleDelete}
        deleteIcon={<Cancel className={classes.icon} />}
      />
      <Cancel className={classes.icon} />
    </Stack>
  );
}

CodeSandbox : https://codesandbox.io/s/deleteablechips-material-demo-forked-d6jq5?file=/demo.js

Answer 1

你可以这样做。

const classes = makeStyles((theme) => ({
    icon: {
      "&.MuiChip-deleteIcon": {
        color: "blue"
      }
    }
}))();

您可以查看此沙箱以获取此用法的实时工作示例。

Answer 2

您不应该使用makeStyles或 v5 中@mui/styles包中的任何内容。 从文档：

@mui/styles是 MUI 的遗留样式解决方案。 它在 v5 中被弃用。 它依赖于 JSS 作为样式解决方案，不再在@mui/material 。 如果你不想在你的包中同时包含情感和 JSS，请参考@mui/system文档，这是推荐的替代方案。

替代方案是sx prop/ styled() 。 以下是其中的 2 个示例：

sx道具

<Chip
  sx={{
    '& .MuiChip-deleteIcon': {
      color: 'red',
    },
  }}
  label="Deletable"
  onDelete={() => {}}
/>

styled()

const options = {
  shouldForwardProp: (prop) => prop !== 'deleteIconColor',
};
const StyledChip = styled(
  Chip,
  options,
)(({ deleteIconColor }) => ({
  '& .MuiChip-deleteIcon': {
    color: deleteIconColor,
  },
}));

<StyledChip
  label="Deletable"
  onDelete={() => {}}
  deleteIconColor="orange"
/>

Answer 3

      <Chip
        classes={{ deleteIcon: classes.deleteIcon }}
        label="Deletable"
        onDelete={handleDelete}
        deleteIcon={<Cancel className={classes.icon} />}
      />

只需用classes替换className