如何不使用内联样式修改MUI v5 Chip组件deleteIcon的颜色

你遇到的样式覆盖问题是因为MUI Chip内置的.MuiChip-root .MuiChip-deleteIcon是后代组合选择器，权重高于你直接给Cancel图标设置的单类名选择器，所以自定义样式会被覆盖。以下是两种符合要求的解决方案：

方案1：使用Chip组件的classes属性（推荐，符合MUI设计规范） #

MUI组件的classes属性专门用来覆盖组件内置的各部分样式，权重和内置样式匹配，不会被覆盖。
修改后代码如下：

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) => ({
    // 定义deleteIcon的自定义样式
    deleteIcon: {
      color: "blue"
    }
  }))();

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

  return (
    <Stack direction="row" spacing={1}>
      <Chip
        // 注意这里用classes属性而非className，指定deleteIcon对应的自定义类
        classes={{ deleteIcon: classes.deleteIcon }}
        label="Deletable"
        onDelete={handleDelete}
        deleteIcon={<Cancel />}
      />
    </Stack>
  );
}

方案2：使用sx属性（MUI v5官方推荐的样式方案，无需额外定义类） #

直接通过Chip的sx属性指定后代deleteIcon的样式，写法更简洁，不属于你提到的原生内联样式范畴：

<Chip
  label="Deletable"
  onDelete={handleDelete}
  deleteIcon={<Cancel />}
  sx={{
    '& .MuiChip-deleteIcon': {
      color: 'blue'
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Kerem atam