reactjs - 覆盖 MUI 芯片 deleteIcon 颜色

Question

我正在尝试为组件（MUI v5）提供自定义deleteIcon颜色Chip。如我所见，我的样式被 覆盖.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>
  );
}

代码沙盒： https ://codesandbox.io/s/deleteablechips-material-demo-forked-d6jq5?file=/demo.js

标签： reactjsmaterial-uijss

Answer 1

你可以这样做。

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

您可以查看此沙箱，了解此用法的实时工作示例。