Estoy trabajando en mi archivo de tema que contiene todas mis anulaciones y estoy tratando de completar la entrada descrita; sin embargo, aparece este error extraño cuando intento hacerlo. Parece que hay 2 bordes de entrada cuando se aplican estos estilos.
Sección de anulaciones de entrada descritas de MUI:
MuiOutlinedInput: { styleOverrides: { root: { borderRadius: "4px", border: "1px solid green ", "&:hover": { borderRadius: "4px", border: "1px solid red" }, "&:disabled": { borderRadius: "4px", border: "1px solid black" }, "&.Mui-focused": { borderRadius: "4px", border: "2px solid blue" }, }, }, },¡Cualquier consejo para solucionar esto es muy apreciado!
Si inspecciona la entrada delineada, verá que hay 2 elementos secundarios. El primero es el elemento de entrada, el segundo es un elemento fieldset. Necesita aplicar estilos al conjunto de campos.
No estoy seguro exactamente de lo que está tratando de hacer con el estilo, ya que tiene 4 colores de borde diferentes aplicados... Supongo que querrá algo similar a
MuiOutlinedInput: { styleOverrides: { root: { "& fieldset" { borderColor: "red"; } }, }, },