覆盖 MUI 芯片 deleteIcon 颜色

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>
  );
}

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

Answer 1

编辑：您可以覆盖类 deleteIcon

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    deleteIcon: {
      color: "red"
    }
  })
);

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

检查这个例子：https://codesandbox.io/s/material-demo-forked-x2dx7?file=/demo.tsx

Answer 2

你可以这样做。

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

您可以查看 this sandbox 以了解此用法的实际工作示例。

Answer 3

您不应使用 makeStyles 或 v5 中 @mui/styles 包中的任何内容。来自 docs:

@mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the @mui/material anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

备选方案是 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"
/>

覆盖 MUI 芯片 deleteIcon 颜色

Overriding MUI Chip deleteIcon color

reactjs

material-ui

jss

`sx` 道具

`styled()`

覆盖 MUI 芯片 deleteIcon 颜色

Overriding MUI Chip deleteIcon color

reactjs

material-ui

jss

sx 道具

styled()

`sx` 道具

`styled()`