React 应用的样式化组件简介

无论您是 React 的初级开发人员还是经验丰富的开发人员，总会遇到有关应用程序样式的问题。

这里您有很多选择，例如：

• 简单的“vanilla”CSS 文件
• 像类这样的模块
• 像 SASS 这样的预处理器
• Tailwind 或 MaterialUI 等框架
• 样式化的组件

我尝试过所有这些方法。我曾经搭建过一些项目，只用了纯 CSS，没有其他任何工具。后来我尝试了模块，它们在动态分配类时非常出色，令我印象深刻。之后我尝试了 CSS 框架，惊讶地发现，你可以轻松地快速设置项目的样式，而无需花时间考虑响应式、设计等等。之后我尝试了样式组件，从那时起，它们就成了我的最爱。

什么是 Styled Components？

styled-components是一个库，它帮助你创建已经带有样式的组件。理解这一点非常重要。在 React 中，一切都围绕着组件，所以如果你喜欢用“组件式”的思维方式来编写代码，那么这种方法非常适合你。

使用styled-components您不再需要编写 CSS，而是创建具有自己样式的组件。

安装和使用

首先需要将此库安装到您的项目中：

npm install --save styled-components

然后你可以将这个库导入到你的 JavaScript 文件（忘记 .css 文件）并开始在那里使用它：

import styles from "styled-component"

此后，我们可以非常轻松地创建一个组件并对其进行样式设置。

假设我们要创建一个组件，作为其他元素的包装器或容器。顺便提一下，这是一个广泛使用的用例。
例如，为了垂直对齐按钮或链接，我们需要className为包装器指定一个div，然后在 CSS 文件中使用display:flex和其他属性来设置样式。每次我们需要这样的容器时，我们都必须这样做。

使用styled-components我们创建一个名为 let's say 的单独组件Wrapper并设置其样式：

export const Wrapper = styled.div`
  display: flex;
  justify-items: center;
  align-items: center;
  margin-top: 1rem;
`;

那么这里发生了什么？
1. 我们创建了一个名为 Wrapper 的变量（这是我们的组件）2.我们访问了上面导入的样式div库并从中获取元素
3.我们div使用模板字面量（你应该熟悉 JavaScript 中的模板字面量）和常用的 CSS 属性来设置元素的样式
4. 我们为组件添加了 Export 字面量，这样我们就可以将其导入到我们想要使用它的其他文件中

就是这样。就这么简单。现在我们可以在任何我们喜欢的地方使用这个组件了：

import {Wrapper} from "./Wrapper.js"

const Buttons = ({children}) =>{
 return(
 <Wrapper>{children}</Wrapper>)
}

为什么要使用 Styled-Components？

有很多原因首先吸引我来到这个图书馆：

1. 基于组件 - 它允许您编写一个封装其自身样式的组件。

2. 避免类名错误 - styled-components 会为你的样式生成唯一的类名。你无需担心重复、重叠或拼写错误。

3. 更轻松地删除 CSS - 您可能很难知道某个类名是否在代码库中被使用。Styled-components 让这一点变得显而易见，因为所有样式都与特定组件绑定。如果组件未使用（工具可以检测到）并被删除，则其所有样式都会随之删除。

4. 简单的动态样式 - 根据组件的道具或全局主题调整组件的样式简单而直观，无需手动管理数十个类（我将在下一篇文章中解释这一点）。

5. 轻松维护 - 您无需在不同文件中搜索来查找影响组件的样式，因此无论您的代码库有多大，维护都是小菜一碟。

6. 优良的旧 CSS - 您使用优良的旧 CSS 规则和属性来设计您的组件，这使得编写变得容易。

我希望我已经让你想尝试styled-components了，我们可以在我的下一篇文章中更深入地学习和使用它们 :)

感谢您阅读我的博客。欢迎在LinkedIn或Twitter上与我联系:)