CODEWITHSUNDEEP
javascriptcssreactjsbootstrap-4material-ui
Kenny Quach
Kenny Quach

Reputation: 275

How to override the label styles in MUI's Chip

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.

enter image description here

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?

Upvotes: 9

Views: 11897

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81340

V5

Approach 1: Use sx prop to style nested component. See a list of global CSS class names here.

<Chip
  label="Chip Filled"
  variant="outlined"
  sx={{
    "& .MuiChip-label": {
      color: "red"
    }
  }}
/>

Approach 2: Pass a styled label:

<Chip
  label={<Box sx={{ color: "blue" }}>Chip Filled</Box>}
  variant="outlined"
/>

Codesandbox Demo

V4

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

Codesandbox Demo

Upvotes: 12

Related Questions