How to change MUI Chip's background color when filled?

Question

I want to change Chip's background color when it's variants value is 'filled' because the default light gray doesn't feel satisfactory.

I read MUI docs and Chip API but it's too complicated for me..

hgb123 · Answer

You could make use of Chip's exported CSS classes

import Chip, { chipClasses } from "@mui/material/Chip";
import { styled } from "@mui/material/styles";

// ..

const CustomChip = styled(Chip)({
  [`&.${chipClasses.filled}`]: {
    backgroundColor: "red"
  }
});

Codesandbox demo

How to change MUI Chip's background color when filled?

1 Answers