JS 中的 CSS：样式组件、情感等的完整指南，以实现更清晰和可扩展的样式

如果您曾经处理过复杂、庞大的 CSS 文件，或者在大型项目中努力保持样式有序，那么您一定会喜欢 JS 中的 CSS。这是因为，通过这种方法，您可以直接在 JavaScript 中编写 CSS，这使得样式模块化且灵活，使其完美适合 React 等基于组件的框架。

我们将深入研究两个最流行的 CSS-in-JS 库：Styled-Components 和 Emotion，并为您提供一些如何有效使用它们的实用技巧。

让我们深入了解这个工具如何在不牺牲干净、可维护、可扩展的代码的情况下改变您的样式。

为什么选择 CSS-in-JS？
JS 中的 CSS 流行的原因之一是它解决了现代 Web 开发中最大的挑战之一，特别是对于构建大型应用程序的团队而言。通过在 JavaScript 中移动样式，我们实现了以下目标：

作用域样式：不再有类名冲突。样式适用于每个组件。

动态样式：使用 JavaScript 逻辑，更改有关道具、主题或应用程序状态的样式。

基于组件的开发：CSS-in-JS 库自然地与基于组件的框架（例如 React、Vue 和 Angular）相结合。这使您的样式保持封装和模块化。

样式组件：基础知识
Styled-Components 可能是 CSS-in-JS 生态系统中最受欢迎的库之一，它非常简单并且易于与 React 一起使用。

快速入门
安装样式组件：
$ npm install styled-components
然后将其导入到您的组件中：
$ 从 'styled-components' 导入样式；

样式组件：

const Button = styled.button`
背景颜色：#6200ea;
颜色：白色；
内边距：10px 20px；
边框半径：5px；
边框：无；
光标：指针；

&:悬停{
背景颜色：#3700b3;
}
在 JSX 中使用样式化组件：

点我

主要特点：
主题化：使用样式组件，您可以创建主题以在整个应用程序中实现一致的样式。

动态样式：人们可能想要更改动态样式的方式。这将与 props 齐头并进，创建非常灵活且可重用的组件。

情感：灵活性和性能
另一个强大的 CSS-in-JS 库是 Emotion，它以灵活性和性能而闻名。它提供了两种主要的样式设置方式：用于内联样式的 css prop，以及用于可重用组件的 styled。

快速入门
安装情感：

npm install @emotion/react @emotion/styled
导入和使用：

从“@emotion/styled”导入样式；

const Card = styled.div`
内边距：20px；
盒子阴影: 0 4px 8px rgba(0, 0, 0, 0.2);
边框半径：8px；
背景颜色：白色；

对于动态内联样式：

从 '@emotion/react' 导入 { css };

constdynamicStyle = css`
颜色：蓝色；
字体大小：16px;

你好，情感！

主要特点：
内联和可重用样式：通过 Emotion 的 css 和样式 API 实现更多控制、更灵活的样式方法。

服务器端渲染：Emotion 针对 SSR 进行了高度优化，因此在需要出色 SEO 性能的应用程序中找到了完美的用例。

CSS-in-JS 的最佳实践
有一些有效使用 CSS-in-JS 的最佳实践，它们有助于保持性能并保持样式干净：

避免太多内联动态样式：内联样式非常适合一次性细微调整。然而，太多会造成性能瓶颈。相反，应用样式组件以实现可重用样式，并将内联样式限制在真正需要的时候。

利用主题：使用主题来强制应用程序中的结构和外观保持一致。像 Styled-Components 和 Emotion 这样的库允许定义一个全局主题。这将使在组件中应用品牌颜色、字体和其他样式标准变得更加容易。

从“样式组件”导入 { ThemeProvider };

常量主题 = {
PrimaryColor: '#6200ea',
字体大小：'16px'，
};

道具驱动样式：动态道具允许您根据组件状态甚至传入数据更改样式。在 Styled-Components 和 Emotion 中，props 都为你的组件提供了一种简单的方式来满足不同使用场景的需求，而无需重写样式。

const Button = styled.button`
背景颜色: ${(props) => (props.primary ? '#6200ea' : '#eee')};
颜色: ${(props) =>(props.primary ? '白' : '黑')};

主按钮
辅助按钮

代码拆分：请注意，如果您不小心，CSS-in-JS 库可能会导致更大的包。利用代码分割等技术，仅加载应用程序每个部分所需的样式，以获得良好的性能。

样式组件与情感
使用哪一个？两者都是令人惊叹的库，并且各自满足不同的需求。快速比较：

styled-components：最适合需要主题和易用性的 React 应用程序。它被高度采用，并且有非常好的文档，因此对初学者很友好。

情感：更灵活且性能优化。如果您需要 SSR 支持或寻求一个可以为您提供内联和可重用样式选项的库，Emotion 将是最合适的。

CSS-in-JS 代表了一种实现现代 Web 样式的强大方法，特别是如果您是使用组件驱动框架的开发人员。借助 Styled-Components 和 Emotion 等库，您可以在整个应用程序中保持样式模块化、动态和一致。

通过密切关注最佳实践（范围内联样式、主题利用和 prop 驱动样式），您可以充分利用 CSS-in-JS 来清理和扩展代码。

准备好改变您在 CSS 中的工作方式了吗？好吧，亲自尝试一下 CSS-in-JS！

以上就是JS 中的 CSS：样式组件、情感等的完整指南，以实现更清晰和可扩展的样式的详细内容，更多请关注硕下网其它相关文章！