样式处理方案一、样式处理方式概览在 React 中有多种处理样式的方法每种都有其适用场景。方式适用场景优点缺点行内样式动态样式、简单组件直观、动态性能差、不支持伪类CSS 模块中小型项目作用域隔离、简单需要配置CSS-in-JS大型项目、组件库动态、类型安全运行时开销Tailwind CSS快速开发实用优先、体积小学习曲线Less/Sass传统项目功能丰富全局作用域二、行内样式 (Inline Styles)2.1 基础用法function Button() { const buttonStyle { backgroundColor: #007bff, color: white, padding: 10px 20px, border: none, borderRadius: 4px, cursor: pointer }; return button style{buttonStyle}点击我/button; }2.2 动态样式function DynamicButton({ primary, disabled }) { const styles { backgroundColor: primary ? #007bff : #6c757d, color: white, padding: 10px 20px, opacity: disabled ? 0.5 : 1, cursor: disabled ? not-allowed : pointer }; return button style{styles} disabled{disabled}按钮/button; }2.3 条件样式合并function StatusBadge({ status }) { const baseStyles { padding: 4px 8px, borderRadius: 4px, fontSize: 12px }; const statusStyles { success: { backgroundColor: #28a745, color: white }, warning: { backgroundColor: #ffc107, color: #333 }, error: { backgroundColor: #dc3545, color: white } }; return ( span style{{ ...baseStyles, ...statusStyles[status] }} {status} /span ); }三、CSS 模块 (CSS Modules)3.1 创建 CSS 模块文件Button.module.css.button{background-color:#007bff;color:white;padding:10px 20px;border:none;border-radius:4px;}.buttonPrimary{background-color:#007bff;}.buttonSecondary{background-color:#6c757d;}.disabled{opacity:0.5;cursor:not-allowed;}3.2 使用 CSS 模块import styles from ./Button.module.css; function Button({ variant primary, disabled }) { const buttonClass ${styles.button} ${variant primary ? styles.buttonPrimary : styles.buttonSecondary} ${disabled ? styles.disabled : } ; return button className{buttonClass} disabled{disabled}按钮/button; }3.3 组合样式import styles from ./Card.module.css; function Card({ title, children }) { return ( div className{styles.card} div className{styles.header} h3 className{styles.title}{title}/h3 /div div className{styles.body}{children}/div /div ); }四、CSS-in-JS (Styled Components)4.1 安装与配置npminstallstyled-components4.2 基础使用import styled from styled-components; const Button styled.button background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; :hover { background-color: #0056b3; } :disabled { opacity: 0.5; cursor: not-allowed; } ; function App() { return Button点击我/Button; }4.3 动态样式const Button styled.button background-color: ${props props.primary ? #007bff : #6c757d}; color: white; padding: ${props props.large ? 12px 24px : 8px 16px}; font-size: ${props props.large ? 16px : 14px}; border: none; border-radius: 4px; cursor: pointer; :hover { background-color: ${props props.primary ? #0056b3 : #5a6268}; } ; function App() { return ( div Button primary主要按钮/Button Button次要按钮/Button Button large primary大号按钮/Button /div ); }4.4 样式继承const BaseButton styled.button padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; ; const PrimaryButton styled(BaseButton) background-color: #007bff; color: white; :hover { background-color: #0056b3; } ; const SecondaryButton styled(BaseButton) background-color: #6c757d; color: white; ;五、Tailwind CSS5.1 安装配置npminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p5.2 基础使用function Button({ children, primary }) { return ( button className{ px-4 py-2 rounded font-semibold ${primary ? bg-blue-500 text-white hover:bg-blue-600 : bg-gray-500 text-white hover:bg-gray-600 } } {children} /button ); }5.3 条件样式function Card({ variant, children }) { const variants { default: bg-white border-gray-200, primary: bg-blue-50 border-blue-200, warning: bg-yellow-50 border-yellow-200, error: bg-red-50 border-red-200 }; return ( div className{p-4 border rounded-lg shadow ${variants[variant]}} {children} /div ); }5.4 使用 clsx 简化类名npminstallclsximport clsx from clsx; function Button({ primary, size medium, disabled }) { return ( button className{clsx( rounded font-semibold transition-colors, { bg-blue-500 text-white hover:bg-blue-600: primary, bg-gray-500 text-white hover:bg-gray-600: !primary, px-2 py-1 text-sm: size small, px-4 py-2 text-base: size medium, px-6 py-3 text-lg: size large, opacity-50 cursor-not-allowed: disabled } )} disabled{disabled} 按钮 /button ); }六、Less/Sass6.1 安装npminstallsass6.2 创建 SCSS 文件styles/variables.scss$primary-color: #007bff; $secondary-color: #6c757d; $border-radius: 4px;Button.scssimport ./variables; .button { padding: 10px 20px; border: none; border-radius: $border-radius; cursor: pointer; -primary { background-color: $primary-color; color: white; :hover { background-color: darken($primary-color, 10%); } } -secondary { background-color: $secondary-color; color: white; } }6.3 在 React 中使用import ./Button.scss; function Button({ variant primary, children }) { return ( button className{button button-${variant}} {children} /button ); }七、样式优先级与最佳实践7.1 样式优先级顺序行内样式- 优先级最高不推荐过度使用CSS 模块- 作用域隔离优先级中等全局 CSS- 优先级最低7.2 最佳实践建议// ✅ 使用 CSS 变量实现主题 const theme { colors: { primary: #007bff, secondary: #6c757d, success: #28a745, danger: #dc3545 }, spacing: { sm: 8px, md: 16px, lg: 24px } }; // ✅ 提取公共样式 const commonStyles { flexCenter: { display: flex, alignItems: center, justifyContent: center } }; // ✅ 使用 CSS 变量 // global.css :root { --primary-color: #007bff; --text-color: #333; } // 组件中使用 div style{{ color: var(--text-color) }}内容/div八、性能优化建议问题解决方案CSS-in-JS 运行时开销使用零运行时方案Linaria、Vanilla Extract样式重复计算使用 styled-components 的 babel 插件全局样式污染使用 CSS 模块或 CSS-in-JS未使用的样式使用 PurgeCSSTailwind 自带九、练习题基础题创建一个卡片组件支持不同主题light/dark实现一个按钮组件支持 primary、secondary、danger 三种变体进阶题实现一个响应式导航栏移动端显示汉堡菜单创建一个支持主题切换的组件亮色/暗色模式参考答案// 1. 主题切换组件 const ThemeContext React.createContext(); function ThemeProvider({ children }) { const [theme, setTheme] useState(light); const toggleTheme () setTheme(theme light ? dark : light); const themeStyles { light: { backgroundColor: #fff, color: #333 }, dark: { backgroundColor: #333, color: #fff } }; return ( ThemeContext.Provider value{{ theme, toggleTheme, themeStyles: themeStyles[theme] }} {children} /ThemeContext.Provider ); } // 2. 响应式导航栏CSS 模块 媒体查询 // Navbar.module.css .nav { display: flex; justify-content: space-between; padding: 1rem; } .menu { display: flex; gap: 1rem; } .hamburger { display: none; } media (max-width: 768px) { .menu { display: none; } .menuOpen { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: white; padding: 1rem; } .hamburger { display: block; } }十、小结场景推荐方案快速原型Tailwind CSS组件库开发CSS-in-JS (styled-components)中小型项目CSS 模块大型应用CSS-in-JS CSS 变量现有项目迁移Less/Sass核心要点根据项目规模选择合适的方案保持样式的一致性注意性能影响优先使用作用域隔离
01-React基础入门——08-样式处理方案
发布时间：2026/6/6 9:41:29
样式处理方案一、样式处理方式概览在 React 中有多种处理样式的方法每种都有其适用场景。方式适用场景优点缺点行内样式动态样式、简单组件直观、动态性能差、不支持伪类CSS 模块中小型项目作用域隔离、简单需要配置CSS-in-JS大型项目、组件库动态、类型安全运行时开销Tailwind CSS快速开发实用优先、体积小学习曲线Less/Sass传统项目功能丰富全局作用域二、行内样式 (Inline Styles)2.1 基础用法function Button() { const buttonStyle { backgroundColor: #007bff, color: white, padding: 10px 20px, border: none, borderRadius: 4px, cursor: pointer }; return button style{buttonStyle}点击我/button; }2.2 动态样式function DynamicButton({ primary, disabled }) { const styles { backgroundColor: primary ? #007bff : #6c757d, color: white, padding: 10px 20px, opacity: disabled ? 0.5 : 1, cursor: disabled ? not-allowed : pointer }; return button style{styles} disabled{disabled}按钮/button; }2.3 条件样式合并function StatusBadge({ status }) { const baseStyles { padding: 4px 8px, borderRadius: 4px, fontSize: 12px }; const statusStyles { success: { backgroundColor: #28a745, color: white }, warning: { backgroundColor: #ffc107, color: #333 }, error: { backgroundColor: #dc3545, color: white } }; return ( span style{{ ...baseStyles, ...statusStyles[status] }} {status} /span ); }三、CSS 模块 (CSS Modules)3.1 创建 CSS 模块文件Button.module.css.button{background-color:#007bff;color:white;padding:10px 20px;border:none;border-radius:4px;}.buttonPrimary{background-color:#007bff;}.buttonSecondary{background-color:#6c757d;}.disabled{opacity:0.5;cursor:not-allowed;}3.2 使用 CSS 模块import styles from ./Button.module.css; function Button({ variant primary, disabled }) { const buttonClass ${styles.button} ${variant primary ? styles.buttonPrimary : styles.buttonSecondary} ${disabled ? styles.disabled : } ; return button className{buttonClass} disabled{disabled}按钮/button; }3.3 组合样式import styles from ./Card.module.css; function Card({ title, children }) { return ( div className{styles.card} div className{styles.header} h3 className{styles.title}{title}/h3 /div div className{styles.body}{children}/div /div ); }四、CSS-in-JS (Styled Components)4.1 安装与配置npminstallstyled-components4.2 基础使用import styled from styled-components; const Button styled.button background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; :hover { background-color: #0056b3; } :disabled { opacity: 0.5; cursor: not-allowed; } ; function App() { return Button点击我/Button; }4.3 动态样式const Button styled.button background-color: ${props props.primary ? #007bff : #6c757d}; color: white; padding: ${props props.large ? 12px 24px : 8px 16px}; font-size: ${props props.large ? 16px : 14px}; border: none; border-radius: 4px; cursor: pointer; :hover { background-color: ${props props.primary ? #0056b3 : #5a6268}; } ; function App() { return ( div Button primary主要按钮/Button Button次要按钮/Button Button large primary大号按钮/Button /div ); }4.4 样式继承const BaseButton styled.button padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; ; const PrimaryButton styled(BaseButton) background-color: #007bff; color: white; :hover { background-color: #0056b3; } ; const SecondaryButton styled(BaseButton) background-color: #6c757d; color: white; ;五、Tailwind CSS5.1 安装配置npminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p5.2 基础使用function Button({ children, primary }) { return ( button className{ px-4 py-2 rounded font-semibold ${primary ? bg-blue-500 text-white hover:bg-blue-600 : bg-gray-500 text-white hover:bg-gray-600 } } {children} /button ); }5.3 条件样式function Card({ variant, children }) { const variants { default: bg-white border-gray-200, primary: bg-blue-50 border-blue-200, warning: bg-yellow-50 border-yellow-200, error: bg-red-50 border-red-200 }; return ( div className{p-4 border rounded-lg shadow ${variants[variant]}} {children} /div ); }5.4 使用 clsx 简化类名npminstallclsximport clsx from clsx; function Button({ primary, size medium, disabled }) { return ( button className{clsx( rounded font-semibold transition-colors, { bg-blue-500 text-white hover:bg-blue-600: primary, bg-gray-500 text-white hover:bg-gray-600: !primary, px-2 py-1 text-sm: size small, px-4 py-2 text-base: size medium, px-6 py-3 text-lg: size large, opacity-50 cursor-not-allowed: disabled } )} disabled{disabled} 按钮 /button ); }六、Less/Sass6.1 安装npminstallsass6.2 创建 SCSS 文件styles/variables.scss$primary-color: #007bff; $secondary-color: #6c757d; $border-radius: 4px;Button.scssimport ./variables; .button { padding: 10px 20px; border: none; border-radius: $border-radius; cursor: pointer; -primary { background-color: $primary-color; color: white; :hover { background-color: darken($primary-color, 10%); } } -secondary { background-color: $secondary-color; color: white; } }6.3 在 React 中使用import ./Button.scss; function Button({ variant primary, children }) { return ( button className{button button-${variant}} {children} /button ); }七、样式优先级与最佳实践7.1 样式优先级顺序行内样式- 优先级最高不推荐过度使用CSS 模块- 作用域隔离优先级中等全局 CSS- 优先级最低7.2 最佳实践建议// ✅ 使用 CSS 变量实现主题 const theme { colors: { primary: #007bff, secondary: #6c757d, success: #28a745, danger: #dc3545 }, spacing: { sm: 8px, md: 16px, lg: 24px } }; // ✅ 提取公共样式 const commonStyles { flexCenter: { display: flex, alignItems: center, justifyContent: center } }; // ✅ 使用 CSS 变量 // global.css :root { --primary-color: #007bff; --text-color: #333; } // 组件中使用 div style{{ color: var(--text-color) }}内容/div八、性能优化建议问题解决方案CSS-in-JS 运行时开销使用零运行时方案Linaria、Vanilla Extract样式重复计算使用 styled-components 的 babel 插件全局样式污染使用 CSS 模块或 CSS-in-JS未使用的样式使用 PurgeCSSTailwind 自带九、练习题基础题创建一个卡片组件支持不同主题light/dark实现一个按钮组件支持 primary、secondary、danger 三种变体进阶题实现一个响应式导航栏移动端显示汉堡菜单创建一个支持主题切换的组件亮色/暗色模式参考答案// 1. 主题切换组件 const ThemeContext React.createContext(); function ThemeProvider({ children }) { const [theme, setTheme] useState(light); const toggleTheme () setTheme(theme light ? dark : light); const themeStyles { light: { backgroundColor: #fff, color: #333 }, dark: { backgroundColor: #333, color: #fff } }; return ( ThemeContext.Provider value{{ theme, toggleTheme, themeStyles: themeStyles[theme] }} {children} /ThemeContext.Provider ); } // 2. 响应式导航栏CSS 模块 媒体查询 // Navbar.module.css .nav { display: flex; justify-content: space-between; padding: 1rem; } .menu { display: flex; gap: 1rem; } .hamburger { display: none; } media (max-width: 768px) { .menu { display: none; } .menuOpen { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: white; padding: 1rem; } .hamburger { display: block; } }十、小结场景推荐方案快速原型Tailwind CSS组件库开发CSS-in-JS (styled-components)中小型项目CSS 模块大型应用CSS-in-JS CSS 变量现有项目迁移Less/Sass核心要点根据项目规模选择合适的方案保持样式的一致性注意性能影响优先使用作用域隔离
