score:1

Accepted answer

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


Related Query

More Query from same tag