es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Estilizando MUI Autocomplete con styled-components

05 Aug, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para estilizar la etiqueta del componente TextField dentro del componente AutoComplete, puedes utilizar la propiedad InputLabelProps del componente TextField de la siguiente manera:

    renderInput={(params) => (
  <textfield {...params}="" label="clearOnEscape" variant="standard" inputlabelprops="{{" style:="" {="" color:="" "white"="" },="" }}=""></textfield>
)}

    Para estilizar el color del texto de las opciones del AutoComplete, puedes utilizar la propiedad getOptionLabel y pasar una función que devuelva la etiqueta con el estilo deseado de la siguiente manera:

    <styledautocomplete id="xxx" clearonescape="" options="{[...]}" getoptionlabel="{(option)" ==""> (
    <span style="{{" color:="" "white"="" }}="">{option.label}</span>
  )}
  renderInput={(params) => (
    <textfield {...params}="" label="clearOnEscape" variant="standard" inputlabelprops="{{" style:="" {="" color:="" "white"="" },="" }}=""></textfield>
  )}
/>

    Al hacer esto, puedes establecer el color del texto de las opciones en blanco o cualquier otro color deseado.

Comments are closed.