一：方式

（1）传统CSS引入方式

1：全局CSS文件

直接通过 import 引入外部 CSS 文件，适用于简单项目或快速开发场景

‌缺点‌=>易引发全局样式污染，需手动管理类名冲突

import './App.css';  // 全局生效
function App() {
  return <div className="container">内容</div>;
} // ‌:ml-citation{ref="1,2" data="citationList"}

2：CSS模块化

通过 .module.css 后缀实现组件级作用域，自动生成哈希类名

‌优势‌=>天然解决全局污染问题，适合中大型项目

import styles from './Component.module.css';
function Component() {
  return <div className={styles.container}>内容</div>;
} // ‌:ml-citation{ref="2,4" data="citationList"}

（2）CSS-in-Js

1：‌Styled Components

使用第三方库将样式嵌入组件

特点‌=>支持动态传参和主题切换，但需额外安装依

import styled from 'styled-components';
const StyledDiv = styled.div`
  padding: 20px;
  background: ${props => props.bgColor};
`;
function App() {
  return <StyledDiv bgColor="#f0f0f0">内容</StyledDiv>;
} // ‌:ml-citation{ref="2,4" data="citationList"}

（3）内联样式

1：对象写法

直接在 JSX 元素上通过 style 属性传递样式对象（小驼峰命名法）

const inlineStyle = { color: 'red', fontSize: '16px' };
function App() {
  return <div style={inlineStyle}>内容</div>;
} // ‌:ml-citation{ref="5,6" data="citationList"}

2：动态传参

结合组件状态或 Props 实现动态样式

function Button({ isActive }) {
  return (
    <button style={{ 
      color: isActive ? 'white' : 'gray',
      background: isActive ? 'blue' : 'transparent'
    }}>
      按钮
    </button>
  );
} // ‌:ml-citation{ref="4,5" data="citationList"}

（4）动态样式处理

1：条件判断与三元表达式（通过逻辑运算符动态切换类名或样式）

function Alert({ type }) {
  return (
    <div className={`alert ${type === 'error' ? 'error-style' : 'info-style'}`}>
      提示信息
    </div>
  );
} // ‌:ml-citation{ref="4,5" data="citationList"}

2：基于状态的样式变化（结合useState实现交互式样式更新）

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);
  return (
    <button 
      className={isOn ? 'active' : 'inactive'}
      onClick={() => setIsOn(!isOn)}
    >
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
} // ‌:ml-citation{ref="2,5" data="citationList"}

二：总结

1：小型项目=>优先选择全局 CSS 或内联样式，减少配置成本

2：中大型项目=>采用 CSS 模块化或 CSS-in-JS 方案，确保可维护性和扩展性

3：动态交互场景=>使用 Styled Components 或内联样式，灵活处理状态驱动的样式变化