0
206
ViewsCómo anular los estilos de etiqueta en el chip de MUI
Estoy usando React con la biblioteca de MUI. El componente MUI que estoy usando es el
Chip
Y en este Chip , existe el atributo de etiqueta donde, opcionalmente, puede mostrar un campo de texto en el chip. Como abajo.
He estado tratando de anular el estilo del texto "Avatar", dentro del Chip usando los supuestos estilos globales de MUI como:
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" />Pero eso no está haciendo el truco. ¿Hay alguna otra manera de lograr esto?
1 answers
Answer question0
V5
Enfoque 1 : use sx prop para diseñar el componente anidado. Vea una lista de nombres de clases CSS globales aquí .
<Chip label="Chip Filled" variant="outlined" sx={{ "& .MuiChip-label": { color: "red" } }} />Enfoque 2: Pase una etiqueta con estilo:
<Chip label={<Box sx={{ color: "blue" }}>Chip Filled</Box>} variant="outlined" /> 
V4
Debe apuntar al componente de etiqueta dentro de Chip , puede hacerlo proporcionando un nombre de clase a la propiedad classes.label :
<Chip classes={{ label: classes.label }} El accesorio de label de Chip es un ReactNode , por lo que también puede proporcionar un componente de etiqueta personalizado al Chip :
<Chip label={<div className={classes.label}>Deletable</div>}