0
204
VistasHow to override the label styles in MUI's Chip
I am using React with MUI's library. The MUI component I am using is the
Chip
And in this Chip, there is the label attribute where you can optionally display a text field in the chip. Like below.
I have been trying to override the style of the "Avatar" text, inside the Chip by using the supposed MUI global styles such as:
label: {
'& .MuiChip-label': {
fontWeight: 'bold',
color: 'orange'
}
},
<Chip
avatar={<Avatar style={{
width: '32px', height: '32px', padding: '5px', border: '1px solid',
backgroundColor: 'black'
}}
className={classes.label}
src="/avatar/photo/pic.png" />}
label="Avatar"
variant="outlined" />
But that is not doing the trick. Is there any other way to accomplish this?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
V5
Approach 1: Use sx prop to style nested component. See a list of global CSS class names here.
<Chip
label="Chip Filled"
variant="outlined"
sx={{
"& .MuiChip-label": {
color: "red"
}
}}
/>
Approach 2: Pass a styled label:
<Chip
label={<Box sx={{ color: "blue" }}>Chip Filled</Box>}
variant="outlined"
/>
V4
You need to target the label component inside Chip, you can do that by providing a class name to the classes.label prop:
<Chip
classes={{
label: classes.label
}}
The label prop of Chip is a ReactNode so you can also provide a customized label component to the Chip:
<Chip
label={<div className={classes.label}>Deletable</div>}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta