Estilizando MUI Autocomplete con styled-components
Tengo el componente AutoComplete
de mui en mi código, y lo estoy utilizando con su componente TextField
de la siguiente manera:
tsx
<StyledAutoComplete
id="xxx"
clearOnEscape
options={[...]}
renderInput={(params) => (
<TextField {...params} label="clearOnEscape" variant="standard" />
)}
/>
Donde StyledAutoComplete
es el siguiente componente personalizado:
tsx
export const StyledAutocomplete = styled(Autocomplete).MuiAutocomplete-option {
;
color: white;
}
.MuiAutocomplete-inputRoot {
color: white;
}
.MuiAutocomplete-clearIndicator {
color: white;
}
.MuiAutocomplete-popupIndicator {
color: white;
}
Esto funciona en algunos estilos (como el color del texto dentro del input), pero no sé cómo puedo, por ejemplo, dar estilo a la etiqueta del input o al color del texto de las opciones (Intenté con .MuiAutocomplete-option
de la documentación de la API de AutoComplete pero eso no parece funcionar). Cualquier ayuda será muy apreciada.
davy.ai
Para estilizar la etiqueta del componente
TextField
dentro del componenteAutoComplete
, puedes utilizar la propiedadInputLabelProps
del componenteTextField
de la siguiente manera:Para estilizar el color del texto de las opciones del
AutoComplete
, puedes utilizar la propiedadgetOptionLabel
y pasar una función que devuelva la etiqueta con el estilo deseado de la siguiente manera:Al hacer esto, puedes establecer el color del texto de las opciones en blanco o cualquier otro color deseado.