'How to change the font size of Chip of Material-UI

I have Chip widget

const styles = {
  root:{
  },
  chip:{
    margin: "2px",
    padding: "2px"
  }
}

const SmartTagChip = (props) =>{
  const classes = useStyles();
  return(  
    <Chip style={{color:"white"}} clickable className={classes.chip}
    color="default" 
     label={item.label} variant="outlined"/>:
  )
}

I want to make font size bigger.

So I try but in vain.

<Chip style={{color:"white"}} clickable className={classes.chip}

I am reading document https://material-ui.com/api/chip/

and found some information about CSS

root    .MuiChip-root   Styles applied to the root element.

I guess I should customize .MuiChip-root class though,

How can I do this?

javascriptcssmaterial-ui


Solution 1:[1]

You can use built-in solution from Material-ui called withStyles. It allows to simply apply styles to components. In your case it will look like this:

const StyledChip = withStyles({
  root: {
    backgroundColor: 'red'// here you can do anything actually 
  },
  label: {
    textTransform: 'capitalize',
  },
})(Chip);

const SmartTagChip = (props) =>{
  const classes = useStyles();
  return(  
    <StyledChip clickable
    color="default" 
     label={item.label} variant="outlined"/>:
  )
}

Solution 2:[2]

You can create a style class for the chip and then access the label through a sub-selector.

export const useStyles = makeStyles(() => ({
    
myClassName: {
    borderRadius: '9px', //some style
    '& .MuiChip-label': { fontSize: 18 }, // sub-selector
  },

}));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tomasz Staszkiewicz
Solution 2 Sabrina Tolmer

Related Questions