React组件条件样式不生效，检查元素存在样式但未渲染如何解决

问题原因 #

• 你定义的inputStyle是普通JS变量，不属于React的响应式状态，在onSubmit里修改它的赋值不会触发组件重新渲染，页面自然不会更新样式。你在开发者工具里看到的样式是首次渲染时挂载的初始样式，后续修改普通变量不会同步到DOM。
• React的行内样式语法不支持!important修饰符，你写的border: "red 10px !important"本身就是无效的行内样式写法。

修复方案 #

1. 新增一个布尔类型的响应式状态来标记URL是否验证失败，通过状态控制样式渲染
2. 根据状态动态生成输入框的样式，行内样式优先级本身足够覆盖普通类名样式，不需要额外加!important
3. 验证通过时记得重置状态恢复默认样式，也可以额外加用户输入时自动清除错误提示的逻辑

修复后的代码如下：

import { useState } from 'react';

export const Form = ({ urlText }) => {
  const [text, setText] = useState("");
  // 新增状态控制输入框错误样式
  const [isUrlInvalid, setIsUrlInvalid] = useState(false);

  function ValidateUrl(link) {
    var urlFormat =
      /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
    return !!link.match(urlFormat);
  }

  const onSubmit = (e) => {
    e.preventDefault();
    if (ValidateUrl(text)) {
      setIsUrlInvalid(false);
      urlText(text);
    } else {
      setIsUrlInvalid(true);
      alert("wrong url");
    }
  };

  // 动态计算输入框样式
  const inputStyle = {
    ...(isUrlInvalid ? { outline: "solid 1px hsl(0, 87%, 67%)" } : {})
  };

  return (
    <div>
      <div>
        <form onSubmit={onSubmit} className="form">
          <div>
            <input
              onChange={(e) => {
                setText(e.target.value);
                // 用户输入时自动清除错误提示
                setIsUrlInvalid(false);
              }}
              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>
  );
};

内容的提问来源于stack exchange，提问作者femizi