Overriding MUI Chip deleteIcon color

Question

I am trying to give custom color to deleteIcon of Chip component (MUI v5). As I can see, my styles are overridden by .css-inlzrk-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon , but I could not override it. I don't want to give inline styles (eg. ).

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

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

user_7399478 · Answer

You can do it like this.

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

You can take a look at this sandbox for a live working example of this usage.

user_9449426 · Answer

You should not use makeStyles or anything from the @mui/styles package in v5. From the 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.

The alternatives are sx prop/styled(). Below are 2 examples of them:

`sx` prop

 {}}
/>

`styled()`

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

 {}}
  deleteIconColor="orange"
/>

user_12367690 · Answer

EDIT:You can override classes deleteIcon

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

Chech this example: https://codesandbox.io/s/material-demo-forked-x2dx7?file=/demo.tsx

Overriding MUI Chip deleteIcon color

3 Answers

sx prop

styled()

`sx` prop

`styled()`