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 /

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?

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./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?

• javascript
• css
• material-ui

Share Improve this question Follow asked Aug 18, 2021 at 7:36 whitebearwhitebear 12.5k2929 gold badges149149 silver badges299299 bronze badges 1

• Try using custom CSS along with !important as a flag at the end of your CSS property. It has the highest CSS Specificity. – Erfan Motallebi Commented Aug 18, 2021 at 7:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

}));

You can use built-in solution from Material-ui called withStyles. It allows to simply apply styles to ponents. 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"/>:
  )
}

To plete Sabrina's answer

import {makeStyles} from "@mui/styles";

    
const useStyles = makeStyles(() => ({
        chipCustom: {
            borderRadius: '9px', //some style
            '& .MuiChip-label': {fontSize: 18}, // sub-selector
        },
    }));
    
const customChipClass = useStyles();
    
<Chip className={customChipClass.chipCustom} label="Test"/>