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. <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

Macruran

the demo is currently broken (Could not find dependency: '@mui/styles'). can you try and fix it so it's easier to reproduce? thanx! – Unbiased

i guess i forgot to save package.json. can i give a try again? – Macruran

cool, it's working now – Unbiased

Icon is not blue inside Chip... Or is it working for you? Are both cancel icons are blue on your browser? – Macruran

i see. nevermind, i didn't understand the issue fully it seems – Unbiased

got it now - see my answer :) – Unbiased

Answer 1

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

<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"
/>

Ruffled

Thanks! I was mid of upgrading hustle from v4 to v5. Really good insight from docs. – Macruran

that's a great answer! I'm upgrading to v5 now and I couldn't understand well how to override the classes with styled! – Prewitt

Answer 2

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.

Chez

Answer 3

EDIT:You can override classes deleteIcon

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

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

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

Fino

why? it makes no difference with className: codesandbox.io/s/… – Unbiased

@EliranMalka doesnt show to me, are you referring to the icon inside the chip – Mila

It did not work for me: codesandbox.io/s/… Am i missing something? – Macruran

@Kerematam I have updated my example, maybe it will be useful – Fino