trying to conditionally style a react component but the style isn't applying

Question

it's a simple code that changes the input area outline colour if it fails my validation but it is taking no style from my js and I don't know what's wrong. the element style shows up when I inspect the element but it just doesn't render

 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>
  );
};

Answer 1

the border syntax should look like this: width | style | color so: border: 10px solid red; and also delete !important it is unnecessary

Answer 2

Can you directly try

style={{border: '10px solid red'}}

if you wanna hold these types of styles you can use styled component.

decleare a use state [pressed,setPressed] = useState(false); then use this setPressed(true) in on press instead of inputStyle

if (ValidateUrl(text)) {
  urlText(text);
} else {
  setPressed(true);
  alert("wrong url");
}

and finally in the input use this

style={pressed? {outline: " 1px solid hsl(0, 87%, 67%)"} : {border: '10px solid red'}}

I am not sure about hsl(0, 87%, 67%) part but if it is true this should work.