How to override the label styles in MUI's Chip-CodePudding

I am using React with MUI's library. The MUI component I am using is the

Chip

And in this Chip, there is the label attribute where you can optionally display a text field in the chip. Like below.

I have been trying to override the style of the "Avatar" text, inside the Chip by using the supposed MUI global styles such as:

label: {
  '& .MuiChip-label': {
    fontWeight: 'bold',
    color: 'orange'
  }
},



<Chip
  avatar={<Avatar style={{
    width: '32px', height: '32px', padding: '5px', border: '1px solid', 
    backgroundColor: 'black'
  }}
  className={classes.label}
  src="/avatar/photo/pic.png" />}
  label="Avatar"
  variant="outlined" />

But that is not doing the trick. Is there any other way to accomplish this?

CodePudding user response：

You need to target the label component inside Chip, you can do that by providing a class name to the classes.label prop:

<Chip
  classes={{
    label: classes.label
  }}

The label prop of Chip is a ReactNode so you can also provide a customized label component to the Chip:

<Chip
  label={<div className={classes.label}>Deletable</div>}