{/* Themed usage */}
  <ThemeProvider theme={theme}>
    <Input placeholder="Themed input" />
  </ThemeProvider>
</div>

);
}

export default App;
“`

解释：

在此示例中，StyledButton 是一个 React 组件，它渲染一个带有指定样式的 <button> 标签。我们可以将 primary 属性传递给 StyledButton，以动态更改其背景和文本颜色。Input 组件演示了主题化，其中其颜色派生自 ThemeProvider 提供的 theme 对象。

流行的 CSS-in-JS 库：Emotion

Emotion 是另一个高性能且灵活的 CSS-in-JS 库，提供强大的样式功能。它通常与 Styled Components 进行比较，但提供更大的灵活性，包括对象样式 API 和更轻量级的体积。Emotion 可以与各种框架一起使用，尽管它最常与 React 一起使用。

主要特点：

• 灵活的 API： Emotion 提供多种样式设置方式：
  • css 属性： 一种方便的方式，可以直接将样式添加到任何 React 组件或 HTML 元素。
  • styled API： 类似于 Styled Components，允许您使用带标签的模板字面量创建样式组件。
  • css 函数： 用于创建可重用样式对象。
• 性能： 以其出色的性能而闻名，具有高效的关键 CSS 提取和最小的运行时开销。
• 主题： 通过 ThemeProvider 支持主题，并使用 useTheme 钩子或直接在样式中访问主题值。
• 框架无关： 可以用于 React 之外的框架，使其成为多功能的选择。

示例：

“`jsx
// App.js
import React from ‘react’;
import { css, keyframes } from ‘@emotion/react’;
import styled from ‘@emotion/styled’;
import { ThemeProvider, useTheme } from ‘@emotion/react’;

// 1. Using the ‘css’ prop for inline styling
const color = ‘hotpink’;

function MyComponentWithCssProp() {
return (

);
}

// 2. Using the ‘styled’ API (similar to styled-components)
const Button = styled.button`
padding: 10px 20px;
background-color: ${({ primary }) => (primary ? ‘rebeccapurple’ : ‘lightgray’)};
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;

&:hover {
opacity: 0.9;
}
`;

// 3. Using the ‘css’ function for reusable styles and keyframes
const bounce = keyframes`
from, 20%, 53%, 80%, to {
transform: translate3d(0,0,0);
}

40%, 43% {
transform: translate3d(0, -30px, 0);
}

70% {
transform: translate3d(0, -15px, 0);
}

90% {
transform: translate3d(0,-4px,0);
}
`;

const animatedBox = csswidth: 100px;
height: 100px;
background-color: steelblue;
animation: ${bounce} 1s ease infinite;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
color: white;;

// 4. Theming with Emotion
const theme = {
colors: {
primary: ‘seagreen’,
text: ‘#333′,
},
spacing: {
medium: ’16px’,
},
};

const ThemedText = styled.pcolor: ${({ theme }) => theme.colors.primary};
margin: ${({ theme }) => theme.spacing.medium};
font-size: 1.2em;;

function ThemedComponent() {
const currentTheme = useTheme(); // Access theme via hook
return This text is themed with {currentTheme.colors.primary}.;
}

function App() {
return (

);
}

export default App;
“`

解释：

此示例展示了 Emotion 的多功能性。我们直接在 div 上使用 css 属性进行组件局部样式，使用 styled API 创建带有基于 props 样式的 Button，使用 css 函数实现可重用样式和 keyframes 实现动画，最后使用 ThemeProvider 和 useTheme 实现应用程序范围的主题化。

流行的样式化方法：CSS Modules

虽然 CSS Modules 并非严格意义上的“CSS-in-JS”（不像 Styled Components 或 Emotion 那样直接在 JavaScript 中定义样式并在运行时注入），但它们是现代 JavaScript 应用程序中实现组件作用域样式的重要模式。它们通过自动为样式生成唯一的类名，解决了传统 CSS 的全局作用域问题。

主要特点：

• 默认作用域： 每个 CSS 文件都被视为一个模块，所有类名和动画名都会被哈希化以实现全局唯一。这确保了一个模块中定义的样式不会无意中影响其他组件。
• 局部作用域： 默认情况下，所有类名都是局部的。如果需要全局样式，可以使用 :global 显式标记它们。
• 无运行时开销： 样式在构建时（例如，通过 Webpack、Parcel、Vite）处理并生成唯一的类名。无需运行时 JavaScript 来注入或管理样式，这使得它们非常高效。
• 熟悉的 CSS 语法： 您可以编写标准的 CSS、SCSS 或 Less，这使得开发人员可以利用现有的 CSS 知识和工具。
• 组合： 您可以轻松地从多个 CSS Modules 组合样式。

示例（与 React 结合）：

首先，创建一个 CSS 文件（例如，Button.module.css）：

“`css
/ Button.module.css /
.button {
background-color: #4CAF50; / Green /
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s ease;
}

.button:hover {
background-color: #45a049;
}

.primary {
background-color: #008CBA; / Blue /
}

.primary:hover {
background-color: #007bb5;
}
“`

然后，在您的 JavaScript/React 组件中导入并使用它（例如，MyButton.jsx）：

“`jsx
// MyButton.jsx
import React from ‘react’;
import styles from ‘./Button.module.css’; // Import the CSS Module

function MyButton({ primary, children }) {
// Conditionally apply the ‘primary’ class
const buttonClassName = primary
? ${styles.button} ${styles.primary}
: styles.button;

return (

{children}

);
}

export default MyButton;
“`

并在您的主应用程序中使用它：

“`jsx
// App.jsx
import React from ‘react’;
import MyButton from ‘./MyButton’;

function App() {
return (

);
}

export default App;
“`

解释：

当导入 Button.module.css 时，会创建一个名为 styles 的 JavaScript 对象。此对象包含与 CSS 文件中定义的类名对应的属性（例如，styles.button、styles.primary）。这些属性的值是生成的唯一类名（例如，_Button_button__xyz123、_Button_primary__abc456）。通过将这些生成的类名应用于您的元素，您可以确保样式作用域仅限于该特定组件。

这种方法将编写纯 CSS 的熟悉性与组件作用域样式的优点结合起来，同时避免了其他 CSS-in-JS 库通常会产生的运行时开销。

如何选择合适的 CSS in JS 解决方案：关键考量 (Choosing the Right Tool: Key Considerations)

在有多种选择的情况下，为您的项目选择最佳的样式解决方案需要权衡几个因素：

1. 项目规模和复杂性：

   • 对于较小的项目或对性能有严格要求的项目，传统 CSS 或 CSS Modules 可能足够且更简单。
   • 对于具有大量组件树、动态样式需求和强大主题化要求的大型复杂应用程序，Styled Components 或 Emotion 等 CSS-in-JS 库通常能提供更具可伸缩性和可维护性的解决方案。

2. 团队熟悉度和专业知识：

   • 如果您的团队非常熟悉传统 CSS 但不擅长 JavaScript，CSS Modules 提供了一个平稳的过渡，允许他们编写熟悉的 CSS 语法，同时获得组件级作用域。
   • 如果您的团队精通 JavaScript 并倾向于更集成的方案，那么 CSS-in-JS 库会感觉更自然。

3. 性能要求：

   • 运行时开销： 考虑某些 CSS-in-JS 库（如 Styled Components、Emotion）的最小运行时开销是否可接受。对于对性能要求极高的应用程序，可能更倾向于构建时解决方案（如 Linaria，甚至 CSS Modules）。
   • 打包大小： 评估库本身的大小对您整体 JavaScript 打包的影响。

4. 服务器端渲染 (SSR) 需求：

   • 如果您的应用程序使用 SSR，请确保所选解决方案对在服务器上提取和注入关键 CSS 有健壮且文档完备的支持，以避免未样式化内容闪烁（FOUC）。

5. 动态样式需求：

   • 如果您的 UI 需要基于组件状态或 props 进行频繁、复杂的动态样式，CSS-in-JS 库由于其原生 JavaScript 集成而表现出色。
   • 对于简单的动态需求，CSS 变量或实用程序优先的 CSS 框架可能就足够了。

6. 主题化策略：

   • 如果一个全面且易于管理的主题系统是优先事项，那么 Styled Components 和 Emotion 等 CSS-in-JS 库提供了出色的内置 ThemeProvider 模式。

7. 生态系统和社区支持：

   • 考虑库的成熟度、社区规模、文档质量和活跃开发。Styled Components 和 Emotion 等流行选择拥有广泛的资源和支持。

结论：

没有一劳永逸的答案。每种方法——传统 CSS、CSS Modules 或成熟的 CSS-in-JS——都有其优点和缺点。“最佳”解决方案是与您的项目特定需求、团队工作流程和性能目标最匹配的解决方案。通常，在为大型项目做出选择之前，在较小范围内尝试几种选择是有益的。