在 React 中使用 !important 和内联样式

作者

在 React 中使用 !important 和内联样式

Using !important with inline styles in React

在 React 中使用 !important 和内联样式：

  1. ref在元素上设置道具。
  2. 将函数传递给ref道具。
  3. 使用setProperty元素style对象上的方法将属性设置为important。
应用程序.js
import {useState, useLayoutEffect, useRef} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const ref = useRef(null);

  useLayoutEffect(() => {
    ref.current.style.setProperty('display', 'block', 'important');
    ref.current.style.setProperty('background-color', 'lime', 'important');
  }, []);

  return (
    <div>
      {/* 👇️ with ref handled in useLayoutEffect */}
      <h2 ref={ref}>Count: {count}</h2>

      {/* 👇️ with inline ref */}
      <h2
        ref={el => {
          if (el) {
            el.style.setProperty('display', 'block', 'important');
            el.style.setProperty('background-color', 'lime', 'important');
          }
        }}
      >
        Count: {count}
      </h2>

      <button onClick={() => setCount(current => current + 1)}>
        Increment
      </button>
    </div>
  );
};

export default App;

反应风格很重要

该代码片段展示了在 React 中使用 !important 和内联样式的 2 种方法。

默认情况下不支持将 !important 添加到内联样式，因此我们必须使用 ref 并以important 编程方式设置 CSS 属性。

第一个示例使用
useRef挂钩创建一个
ref对象。

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的h2元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们使用
setProperty
方法为元素的 CSS 样式声明对象的属性设置新值。

应用程序.js
useLayoutEffect(() => {
  ref.current.style.setProperty('display', 'block', 'important');
  ref.current.style.setProperty('background-color', 'lime', 'important');
}, []);

该方法采用以下 3 个参数：

  1. propertyName– 我们要修改的 CSS 属性的名称。请注意，多个单词的属性名称必须用连字符连接。
  2. value– CSS 属性的新值
  3. priority– 可以设置为important或空字符串。
该value参数不得包含“!important”。优先级应作为第三个参数传递给 setProperty 方法。

useLayoutEffect

挂钩与 相同，但在所有 DOM 变更后同步触发。useEffect

第二个示例显示如何important使用内联
设置 CSS 属性ref。

应用程序.js
<h2
  ref={el => {
    if (el) {
      el.style.setProperty('display', 'block', 'important');
      el.style.setProperty('background-color', 'lime', 'important');
    }
  }}
>
  Count: {count}
</h2>

我们传递给refprop 的函数将与元素一起调用，因此我们可以使用相同的方法将其属性设置为important。

–

发表评论