组件样式

same::

组件样式管理

• React

概述

• 核心：样式应与组件生命周期一致；能静态隔离用CSS Modules，需动态则用Effect/类名或CSS-in-JS。
• 相关：CSS导入的副作用

方法选择

• 原子化样式：[use::内联style]，[use::UNOCSS]
  • 缺点，只能影响组件内的标签
• useEffect 注入 <style>：完全控制、需管理清理
• 动态类名：简单，注意全局污染
• CSS Modules：零运行时，适合常规组件
• CSS-in-JS：主题化/动态强

示例与扩展

child::

React 自用组件样式钩子

代码与说明

• 作用：挂载时注入样式，卸载时移除；

import { useEffect } from 'react';
 
export const useComponentStyles = (
  styleId: string,
  isMinHeight: boolean = false,
  customStyle: string = ''
) => {
  useEffect(() => {
    if (!document.getElementById(styleId)) {
      const style = document.createElement('style');
      style.id = styleId;
      style.textContent = `
      ${isMinHeight ? 'div#root>div.ant-layout { height: 100vh; }' : ''}
      ${customStyle}
      `;
      document.head.appendChild(style);
    }
    return () => document.getElementById(styleId)?.remove();
  }, [styleId, isMinHeight, customStyle]);
};

指向原始笔记的链接

指向原始笔记的链接