Tengo widget Chip
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"/>: ) }Quiero aumentar el tamaño de la fuente.
Así que lo intento pero en vano.
<Chip style={{color:"white"}} clickable className={classes.chip} Estoy leyendo el documento https://material-ui.com/api/chip/
y encontré algo de información sobre CSS
root .MuiChip-root Styles applied to the root element. Aunque supongo que debería personalizar la clase .MuiChip-root ,
¿Cómo puedo hacer esto?
Puede usar la solución integrada de Material-ui llamada withStyles . Permite simplemente aplicar estilos a los componentes. En tu caso se verá así:
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"/>: ) }Puede crear una clase de estilo para el chip y luego acceder a la etiqueta a través de un subselector.
export const useStyles = makeStyles(() => ({ myClassName: { borderRadius: '9px', //some style '& .MuiChip-label': { fontSize: 18 }, // sub-selector }, }));Para completar la respuesta de Sabrina
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"/>