0
315
Views¿Cómo cambiar el color del borde cuando aparece el texto auxiliar de error en TextField?
Estoy usando el elemento TextField de React Material UI. Lo que quiero es cuando presiono el botón Enviar, el texto de ayuda que obtengo es "Por favor ingrese la contraseña".
Como esto:
Pero cuando aparece el texto de ayuda, necesito cambiar el color del borde de TextField al color que quiero aplicar desde el archivo SCSS. Como quiero cambiar el color del borde a través del archivo SCSS.
Lo que quiero que esté enfocado es algo como esto. El borde de TextField debe ser rojo y su contorno debe ser azul:
El código que he hecho hasta ahora:
<TextField id="form-el-2 outlined-basic" name="userName" variant="outlined" placeholder={"Please enter valid password"} helperText={ errorMsgs.userNameErr && errorMsgs.userNameErr.length ? errorMsgs.userNameErr : null } onChange={handleChange} value={cabinetInfo.userName} />;Y también SCSS:
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border: 1px solid; border-color: #c4c4c4; outline: 1px solid $primary-color !important; outline-offset: 1px; }¿Como hacer eso? es posible? Gracias por adelantado.
2 answers
Answer question0
Puede crear una clase personalizada y luego aplicarla a su componente de forma condicional
// Whatever classname or styles you want .text-field-with-error { border: 1px solid; border-color: #c4c4c4; outline: 1px solid $primary-color !important; outline-offset: 1px; }y la parte Jsx será:
<TextField className={hasError ? "text-field-with-error" : " "} />0
Puede pasar la propiedad de error a <TextField />
Consulte este ejemplo o la documentación de Material-ui aquí.
<TextField error id="outlined-error-helper-text" label="Error" defaultValue="Hello World" helperText="Incorrect entry." />