Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

124
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!

7 months 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

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.