Campo de texto de Material UI, formato de campos obligatorios.
Quiero cambiar el color del borde subrayado de los campos de texto que son obligatorios en un formulario (react-hooks-form).
Supongo que necesito crear un estilo para estos campos, pero aquí es donde me quedé atascado…
Este es mi código:
campo:
` `
<Controller
name = & quot; date & quot;
control = {control}
defaultValue = {props.operation === & # 39; edit & # 39;? props.values.date: null}
render = {({ campo: {onChange, value }, estado del campo: {error}}) => (
<TextField
id = & quot; date & quot;
tipo = & quot; date & quot;
etiqueta = & quot; fecha & quot;
value = {valor}
className = {classes.textField}
onChange = {(event) => {
onChange (event.target.value);
setValue (& # 39; week & amp; # 39 ;, obtenerSemana (event.target.value))
}}
error = {!! error}
helperText = {error? error.message: null}
InputLabelProps = {{
reducir: verdadero,
}}
/// agregado
InputProps = {{
className: classes.mandatory,
}}
/ & amp; gt;
)}
reglas = {{ requerido: & amp; # 39; Date is required & amp; # 39; }}
/ & amp; gt;
estilos:
const useStyles = makeStyles ((tema: Tema) =>
crearEstilos ({
raíz: {
‘& amp; .MuiTextField-root & amp;’: {
margen: tema.spacing (2),
ancho: & # 39; 26ch & # 39 ;,
},
},
/// agregado
obligatorio: {
borderBottom: & # 39; 1px sólido rgb (215 50 50/70%) & # 39;
}
}),
);
He intentado agregar el color del borde, pero no funciona.
La única solución que encontré hasta ahora es hacer que el campo esté en foco…
ACTUALIZACIÓN # 2: posible solución agregar estilo a TextField:
` `
& lt;TextField
{... parametros }
error = {!! error}
helperText = {error? error.message: null}
etiqueta = & amp; quot; appel * & amp; quot;
className = {`obligatorio $ {clases.textField}`}
style = {{borderBottom: & # 39; 1px sólido rojo & # 39;}}
/ & amp; gt;
davy.ai
Para cambiar el color del borde subrayado de los campos de texto que son obligatorios en un formulario (con react-hooks-form), puede crear un estilo para los campos obligatorios y agregarlo al componente TextField.
Primero, necesita crear un estilo para los campos obligatorios. Puede hacer esto utilizando la función makeStyles de Material-UI. Aquí hay un ejemplo:
Esto crea un estilo llamado “mandatory” con un borde subrayado rojo.
A continuación, puede agregar este estilo al componente TextField agregando la clase “mandatory” a la propiedad className y estableciendo la propiedad style para incluir el color deseado del borde subrayado. Aquí hay un ejemplo:
Tenga en cuenta que debe usar la función “register” de react-hook-form para registrar el campo como obligatorio y pasar la regla “required” como argumento.
Con esta configuración, los campos de texto con la clase “mandatory” tendrán un borde subrayado rojo.