深入学习CSS进阶中的CSS-in-JS怎么使用？

在现代化前端开发中，随着组件化架构的普及，传统的CSS写法逐渐暴露出一些局限性，比如全局污染、命名冲突以及缺乏动态能力等，为了解决这些问题，CSS-in-JS 应运而生，它不仅将 CSS 与 JavaScript 紧密结合，还提供了动态样式、作用域隔离等强大功能，本文将深入探讨 CSS-in-JS 的概念、使用方式以及实际应用场景,帮助开发者快速上手这一技术。

---

什么是 CSS-in-JS？

CSS-in-JS 是一种将 CSS 直接写在 JavaScript 文件中的技术方案，它利用 JavaScript的能力动态生成 CSS，同时将样式绑定到特定组件，从而避免全局污染，这种模式尤其适合 React、Vue（结合单文件组件的逻辑扩展）等组件化框架，使样式与组件逻辑、结构更紧密地结合。

常见的 CSS-in-JS 库包括 Styled Components、Emotion 和 JSS，它们各有特点，但核心思想一致：通过 JavaScript增强样式的动态性和可维护性。

---

CSS-in-JS 的基本使用方法

下面以 Styled Components 和 Emotion 两个主流库为例，介绍 CSS-in-JS 的具体用法。

安装依赖

使用 npm 或 yarn 安装对应的库：

# 使用 Styled Components
npm install styled-components
# 或使用 Emotion
npm install @emotion/react @emotion/styled

创建样式组件

Styled Components 的核心是通过模板字面量定义样式化的组件,创建一个带样式的按钮：

import styled from 'styled-components';
const StyledButton = styled.button`
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background: #0056b3;
  }
`;
// 在组件中使用
function App() {
  return <StyledButton>Click Me</StyledButton>;
}

Emotion 的用法类似,但语法稍有不同：

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/react'; // 或直接使用 styled
import styled from '@emotion/styled';
const Button = styled.button`
  background: #28a745;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  &:hover {
    background: #218838;
  }
`;
// 或使用 css 属性
const style = css`
  color: hotpink;
`;
function App() {
  return <Button css( (或(其他, 如直接应用) ) // (实际这里 Button 直接用，或对内部元素用 css) 
   // 更正示例：对内部文字应用动态样式
  > <span css={style}>Styled Text</span> </Button> /* 或直接 Button 内文字不加额外样式 */; 
  // 更清晰的例子：
  // <div css={style}>Hot Pink Text</div>
}
// (上述例子中 Emotion 的 css 用法常用于非组件样式或动态样式，而 styled 用于创建样式组件)
// 简化正确示例：
function CorrectApp() {
  return <div css={css`color: hotpink;`}>Hot Pink Text</div>; // 或者使用 styled 组件方式
}
// 但通常我们会用 styled 来创建组件，或对已有组件应用 css 样式

（注：上述 Emotion 示例中，直接对组件内元素应用样式时，使用 css 函数包裹样式字符串，并通过 css 属性（需配置 jsx 运行时）或 cx 辅助函数等方式应用，更常见的做法是使用 styled 创建样式组件，或在函数组件内直接使用 css 结合 jsx 函数应用样式。）

动态样式与主题支持

CSS-in-JS 的强大之处在于支持动态样式，根据 props 动态改变按钮颜色：

// Styled Components 示例
const DynamicButton = styled.button`
  background: ${props => props.primary ? 'purple' : 'gray'};
  color: white;
  padding: 10px 20px;
`;
// Emotion 示例
const DynamicButtonEmotion = styled.button((props) => css`
  background: ${props.primary ? 'purple' : 'gray'};
  color: white;
  padding: 10px 20px;
`); // 注意 Emotion 的 styled 接受样式生成函数时，需用 css 包裹或直接返回样式字符串（若无需动态逻辑则直接写样式字符串）
// 更正 Emotion 动态样式示例（无需额外 css 包裹，若直接作为 styled 的参数）：
const DynamicButtonEmotionCorrect = styled.button`
  background: ${props => props.primary ? 'purple' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

CSS-in-JS 库通常支持主题（Theme）功能，允许全局定义设计系统变量，如颜色、间距等,并在组件中统一使用。

---

CSS-in-JS 的优势与适用场景

优势：

1. 作用域隔离：样式自动绑定到组件,避免全局污染。
2. 动态样式：根据组件状态或 props 动态调整样式。
3. 代码组织：样式与组件逻辑共存,提升可维护性。
4. 主题支持：方便统一管理设计系统变量。

适用场景：

• 大型组件化项目,需要严格隔离样式。
• 需要动态调整样式的复杂交互场景。
• 希望将样式与组件逻辑紧密结合,提升代码复用性。

---

CSS-in-JS 是前端样式方案的一次重要革新，它通过结合 JavaScript的灵活性，解决了传统 CSS的诸多痛点，无论是 Styled Components 还是 Emotion，都提供了简洁而强大的 API，帮助开发者高效管理样式，对于追求现代化开发体验的团队，CSS-in-JS 无疑是一个值得尝试的选择，通过合理使用这一技术,可以显著提升项目的可维护性和开发效率。