es un código simple que cambia el color del contorno del área de entrada si falla mi validación, pero no toma el estilo de mi js y no sé qué está mal. el estilo del elemento aparece cuando inspecciono el elemento pero simplemente no se representa
export const Form = ({ urlText }) => { let inputStyle = { border: "red 10px !important", }; const [text, setText] = useState(""); function ValidateUrl(link) { var urlFormat = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/; if (link.match(urlFormat)) { return true; } else { return false; } } const onSubmit = (e) => { e.preventDefault(); if (ValidateUrl(text)) { urlText(text); } else { inputStyle = { outline: "solid 1px hsl(0, 87%, 67%)", }; alert("wrong url"); } }; return ( <div> <div> <form onSubmit={onSubmit} className="form"> <div> <input onChange={(e) => setText(e.target.value)} style={inputStyle} type="text" size="30" id="url" placeholder="Shorten a link here..." /> </div> <div> <button type="submit" className="main-btn"> Shorten It! </button> </div> </form> </div> </div> ); };la sintaxis del borde debería verse así: ancho | estilo | color so: borde: 10px rojo sólido; y también eliminar !importante es innecesario
puedes probar directamente
style={{border: '10px solid red'}}si desea mantener este tipo de estilos, puede usar un componente con estilo .
declarar un estado de uso [pulsado, setPressed] = useState(false); luego use este setPressed (verdadero) en la prensa en lugar de inputStyle
if (ValidateUrl(text)) { urlText(text); } else { setPressed(true); alert("wrong url"); }y finalmente en la entrada usa esto
style={pressed? {outline: " 1px solid hsl(0, 87%, 67%)"} : {border: '10px solid red'}}No estoy seguro acerca de la parte hsl (0, 87%, 67%), pero si es cierto, debería funcionar.