嘗試有條件地設置 React 組件的樣式，但該樣式未應用

Question

這是一個簡單的代碼，如果我的驗證失敗，它會更改輸入區域的輪廓顏色，但它沒有從我的 js 中獲取樣式，我不知道出了什么問題。 當我檢查元素時會顯示元素樣式，但它只是不呈現

 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

邊框語法應如下所示： width | 風格| 顏色如此：邊框：10px純紅色； 並刪除 !important 它是不必要的

Answer 2

可以直接試試嗎

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

如果你想保存這些類型的樣式，你可以使用樣式組件。

清除使用狀態 [pressed,setPressed] = useState(false); 然后在按下時使用這個 setPressed(true) 而不是 inputStyle

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

最后在輸入中使用這個

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

我不確定 hsl(0, 87%, 67%) 部分，但如果這是真的，這應該可行。