1
import { useInsertionEffect } from 'react';
2

3
function MyComponent() {
4
  useInsertionEffect(() => {
5
    // 执行样式注入逻辑（仅同步操作，无布局读取）
6
    // 副作用清理函数（可选）
7
    return () => {
8
      // 清理注入的样式（如移除 style 标签）
9
    };
10
  }, [依赖项数组]); // 依赖项变化时重新执行
11

12
  return <div>组件内容</div>;
13
}

1
import { useInsertionEffect } from 'react';
2

3
// 简易 CSS-in-JS 样式注入函数
4
function useInjectStyles(styles) {
5
  useInsertionEffect(() => {
6
    // 创建 style 标签
7
    const styleTag = document.createElement('style');
8
    styleTag.innerHTML = styles;
9
    // 插入到 head 中（DOM 变更后、布局计算前）
10
    document.head.appendChild(styleTag);
11

12
    // 清理函数：卸载时移除 style 标签
13
    return () => {
14
      document.head.removeChild(styleTag);
15
    };
16
  }, [styles]); // 样式变化时重新注入
17
}
18

19
// 业务组件
20
function Button() {
21
  // 注入按钮样式
22
  useInjectStyles(`
23
    .custom-button {
24
      padding: 8px 16px;
25
      background: #165DFF;
26
      color: white;
27
      border: none;
28
      border-radius: 4px;
29
      cursor: pointer;
30
    }
31
    .custom-button:hover {
32
      background: #0040C9;
33
    }
34
  `);
35

36
  return <button className="custom-button">点击按钮</button>;
37
}
38

39
export default Button;

1
import { useState, useInsertionEffect } from 'react';
2

3
function DynamicStyleComponent() {
4
  const [isDark, setIsDark] = useState(false);
5

6
  // 动态生成样式
7
  const dynamicStyles = `
8
    .theme-container {
9
      width: 300px;
10
      height: 200px;
11
      padding: 20px;
12
      background: ${isDark ? '#1f1f1f' : '#ffffff'};
13
      color: ${isDark ? '#ffffff' : '#1f1f1f'};
14
      border: 1px solid #e0e0e0;
15
    }
16
  `;
17

18
  // 注入动态样式
19
  useInsertionEffect(() => {
20
    const styleTag = document.createElement('style');
21
    styleTag.id = 'dynamic-theme-style';
22
    styleTag.innerHTML = dynamicStyles;
23

24
    // 先移除旧样式（避免重复），再插入新样式
25
    const oldStyleTag = document.getElementById('dynamic-theme-style');
26
    if (oldStyleTag) {
27
      document.head.removeChild(oldStyleTag);
28
    }
29
    document.head.appendChild(styleTag);
30

31
    return () => {
32
      const styleTag = document.getElementById('dynamic-theme-style');
33
      if (styleTag) {
34
        document.head.removeChild(styleTag);
35
      }
36
    };
37
  }, [dynamicStyles]); // 依赖动态样式，状态变化时重新注入
38

39
  return (
40
    <div>
41
      <button onClick={() => setIsDark(!isDark)}>
42
        切换{isDark ? '浅色' : '深色'}模式
43
      </button>
44
      <div className="theme-container">
45
        动态主题容器：{isDark ? '深色模式' : '浅色模式'}
46
      </div>
47
    </div>
48
  );
49
}
50

51
export default DynamicStyleComponent;