Estoy tratando de diseñar un componente select en un proyecto de reacción usando MUI 5, específicamente, estoy tratando de cambiar el tamaño y el color del borde cuando el componente select está enfocado. Otros componentes pueden diseñarse globalmente sin problemas usando styleOverrides seguido de root, pero select no parece tener el atributo root. Intenté cambiar el componente de select en un textfield de campo de texto con el accesorio de selección y eso pareció funcionar, pero me preguntaba si hay una manera de select el estilo sin cambiarlos a un campo de textfield .
Este es el fragmento de código que uso para mis textfield de estilo global de campo de texto:
export const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root.Mui-focused fieldset': { border: '3px solid #A6CBF3'},
},
},
},
})
Así es como podría cambiar el estilo del estado de enfoque para el componente Select usando el tema.
export const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
select: {
":focus": {
backgroundColor: "green", // Just for the demo
border: '3px solid #A6CBF3',
},
},
}
},
})
Espero haber ayudado, gracias.