Estoy creando un tema MUI personalizado y me cuesta diseñar el contorno con muescas de un <OutlinedInput /> notchedOutline . Simplemente quiero que cuando la entrada esté deshabilitada, el color del borde sea más claro que el color predeterminado.
Esto es lo que probé:
const theme = { mode: 'light', primary: { main: primaryBlue, }, components: { MuiOutlinedInput: { styleOverrides: { // Ideally I could mix 'disabled' & 'notchedOutline' here notchedOutline: { borderColor: 'red' // it appear red }, disabled: { borderColor: 'green', // but not green } } } } }¿Tienes alguna pista?
¡Después de muchas pruebas y errores , finalmente logré personalizar el color del borde de la entrada deshabilitada !
const theme = { ... components: { MuiOutlinedInput: { styleOverrides: { // THE ANSWER root: { "&.Mui-disabled": { "& .MuiOutlinedInput-notchedOutline": { borderColor: 'grey' // change border color }, "& .MuiInputAdornment-root p": { color: 'grey', // change adornment style }, } }, } } } } Lo que me confundió es que la entrada en sí misma no tenía el borde. Este era un elemento hermano <fieldset class='MuiOutlinedInput-notchedOutline'>
Prueba esto :
'&$disabled': { borderColor: 'green', },Creo que hay algún problema con los discapacitados, o el borde no existe en discapacitados.
prueba esto
MuiOutlinedInput: { styleOverrides: { root: { '.Mui-disabled': { border: '1px solid red', }, }, }, },