CODEWITHSUNDEEP
javascriptcssmaterial-ui
whitebear
whitebear

Reputation: 12423

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?

Upvotes: 3

Views: 6888

Answers (3)

Clement Martino
Clement Martino

Reputation: 475

To complete 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"/>

Upvotes: 1

Sabrina Tolmer
Sabrina Tolmer

Reputation: 5439

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

}));

Upvotes: 3

Tomasz Staszkiewicz
Tomasz Staszkiewicz

Reputation: 440

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"/>:
  )
}

Upvotes: 1

Related Questions