Estoy tratando de personalizar los elementos de opción en la lista de autocompletar. Quiero hacer esto mediante el uso de renderOptions prop, donde puedo crear elementos DOM. Luego, puedo agregar estilos con bastante facilidad con sx o componentes con estilo.
Pero algo está mal. Cuando trato de renderizar elementos de la lista de opciones envueltos en divs, los nombres de las películas están ocultos (?) Se renderizan, porque aún puedo elegir la opción, y luego se muestra como seleccionado, pero la lista de entrada aún está rota, y los estilos CSS no se aplican.
¿Qué me estoy perdiendo? Autocompletar y su estilo es nuevo para mí.
El código:
<Autocomplete freeSolo id="free-solo-2-demo" disableClearable options={top100Films.map((option) => option.title)} renderOption={(props, option) => { return ( <li {...props}> <div sx={{ backgroundColor: "red", color: "orange" }} > {option.title} </div> </li> ); }} renderInput={(params) => ( <TextField {...params} label="Search input" InputProps={{ ...params.InputProps, type: "search" }} /> )} /> </Stack> ); }Aquí está la demostración: https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js
TL; DR Simplemente cambie option.title a option en renderOption prop. Y use Box en lugar de div para aplicar estilos.
No pude encontrarlo indicado explícitamente en la documentación, pero aparentemente cada uno de los elementos pasados a las options se pasan a renderOption como argumento de option .
Entonces, dado que ya pasó una serie de cadenas option.title a options , deberá referirse a ellas solo como option en renderOption prop.
Los componentes MUI utilizan el accesorio sx . Entonces, cambie div al componente MUI Box dentro renderOption . La Box fue creada específicamente para estos casos .