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