• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

205
Vistas
How I can change the input color of Material UI TextField when is input is disabled [MUI v: 5.0.8]

I want to change the border color and text color when input is disabled. I tried all variants like you see below:

const textFieldStyle = {
    '& label': {
        color: darkMode?'#1976d2':'',
    },

    '& .MuiOutlinedInput-root': {
        color:darkMode?'#1976d2':'',
        '& fieldset': {
          borderColor:darkMode?'#1976d2':'',
        },
        '&:hover fieldset': {
            borderColor: darkMode?'#1976d2':'',
        }, 
 
    },
    "& input.Mui-disabled": {
        color: "green"
      }

};

<TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>

Rest of the style work just fine like general color and focused color!

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

you can use this code in v4:

 MuiInputBase: {
    root: {
      "&$disabled": {
        color: "red",
        border: "1px solid red"
      }
    }
  }

based on Material-ui documentation in version 5 The $ syntax used with JSS will not work with Emotion. You need to replace those selectors with a valid class selector.

this is the style

    const useStyles = makeStyles({
    customDisable: {
      "& .MuiInputBase-input.Mui-disabled": {
        color: "red !important",
        "-webkit-text-fill-color": "red !important",
        borderColor: "red !important"
      },
      "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
        borderColor: "red !important"
      }
    }
  });

and then in TextField like this

<TextField
        disabled
        className={classes.customDisable}
        id="outlined-disabled"
        defaultValue="Hello World"
      />

here is the Codesandbox

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda