0
225
VistasCambiar el color del borde de la entrada de contorno MUI deshabilitado
Realmente estoy luchando por encontrar dónde se define este color de borde. Inspeccioné el dom pero no veo ningún estilo de borde en ninguno de los componentes de entrada ni en sus pseudo elementos...
Simplemente quiero aclarar el color del borde de entrada para que coincida con el color deshabilitado de mi tema.
Aquí está el código que usé y el render.
<OutlinedInput size='small' disabled={disabled} value={value} endAdornment={<InputAdornment position="end">{ctx.user.currency.short}</InputAdornment>} inputProps={{ style: { paddingBottom: 4, } }} style={{ fontWeight: 700, fontSize: 18 }} {...props} /> He intentado usar <TextField /> pero tiene el mismo problema. Usted me podría ayudar por favor ?
2 Respuestas
Responde la pregunta0
He hecho esto usando el tema palatte. estoy usando mui 5.5.0
import {createTheme} from "@mui/material"; const theme = createTheme({ palette: { action: { disabled: 'your color here eg #000000', } }, });Al hacer esto, cada campo deshabilitado en la aplicación tendrá el color definido en la paleta. Y si desea hacer esto para un campo de entrada único/específico o desea anular este color definido deshabilitado palatte. puedes hacerlo siguiendo:
<TextField value={value} variant="outlined" label="label" disabled sx={{ "& .MuiInputBase-root.Mui-disabled": { "& > fieldset": { borderColor: "your color here eg #8cffcb" } } }} />0
Agregue a su archivo css:
.MuiOutlinedInput-notchedOutline { border-color: red !important; border-width: 4px !important; }aquí está la salida:
