如何在 React JS 应用程序中使用 Sass 和样式组件

今天我们将介绍一些流行的方法来设计我们的 React JS 应用程序，例如 Styled Components 和 Sass，以解释两者的优点。

在线开发社区中，关于是否应该使用 CSS-in-JS 或 CSS-in-Javascript 的争论愈演愈烈。本文并非赞同或反对任何一种观点，而只是提供一些介绍，以便您自行判断。

今天我们要介绍的两个工具是 Styled Components，它是一个 CSS-in-JS 库，可以轻松地在 React.js 项目中实现。另一个工具是 Sass，它是过去几年 JavaScript 世界中流行的工具。

对于每个示例，我们将创建一个包含图片、用户名、时间戳、用户照片和状态的社交卡片组件。需要注意的是，这些组件并非 React 独有。您可以在 Vuejs、Angular 或其他任何 JavaScript 框架中使用这些组件。

人们为何对 CSS-in-JS 争论不休？

争论的主要原因与关注点分离有关。把样式直接写在组件内部是不是更好？我们应该把样式和 JavaScript 代码分开吗？

我不知道是否一定存在一个“正确”的答案。我相信有些用例会更适合每种语言，尽管我发现自己更经常使用 Sass。让我们更深入地了解每种语言，以便您决定更喜欢哪种！

CSS-in-JS

CSS-in-JS 的概念自 2014 年被提出以来便引起了轰动。从那时起，许多不同的库应运而生，试图将这一概念变为现实。其中一些库包括：Styled Components、Radium、Aphrodite和Emotion。

在本文中，我将使用 Styled Components，但我建议您逐一了解一下，因为它们各自都有自己的语法，并且工作方式也略有不同。每个组件的文档都很不错，可以帮助您学习基础知识，并了解哪种组件使用起来更顺手。

安装样式组件

假设我们已经搭建好了一个 React.js 项目，我们可以通过在终端中运行npm install styled-components或来将 Styled Components 添加到项目中。这会将依赖项添加到项目中，并让我们准备好设置应用程序的样式。yarn add styled-components

使用样式组件创建卡片

下一步是创建一个组件来显示我们的卡片。我们可以使用以下代码来实现：

让我们来谈谈上面的代码。如果你熟悉 CSS，你可能会看到一些熟悉的东西，但也会看到一些有点奇怪的东西。Styled Components 允许我们像在 CSS 文件中一样编写样式，尽管其他一些 CSS-in-JS 库会要求我们使用驼峰命名法，因为它实际上只是创建一个 JavaScript 对象。

上面的代码的作用是创建一个const名为 Card 的变量，该变量表示styled创建一个具有以下属性的 div。这可以应用于任何 DOM 元素，因此，如果您想为 h1 标签添加样式，可以使用styled.h1。

添加媒体查询和嵌套

在 Card 变量内部，我们还可以插入媒体查询，使其响应更快。如果我们像下面的代码一样添加媒体查询，您会看到，当达到最大宽度 1000px 时，卡片背景会变成红色。这并非我们真正想要添加的样式，只是为了演示目的。

我们还可以在样式组件中嵌套样式，从而简化代码编写。如果您使用过 sass 或 less，那么您已经熟悉这个概念。下面的示例展示了如何通过这种方式处理卡片组件中图片的样式：

在样式中使用 Javascript

使用 CSS-in-JS 的另一个好处是，我们可以将 JavaScript 与样式混合使用。我知道这从概念名称上看似乎很明显，但我的意思是，我们可以使用逻辑来显示内容，并且可以将变量传递给样式。借助像 React.js 这样的库，这会成为一个非常强大的工具。我们不会保留这种样式，因为它有点令人讨厌，但为了便于说明，我们可以使用字符串文字来实现，如下所示：

使用 CSS-in-JS 可以让我们将样式保留在本地，而不是将所有内容设置为全局，也不必为所有内容添加大量的类名才能使其正常工作。这意味着代码可以更简洁，我们不必担心一种样式会覆盖另一种样式。此外，如果需要更改样式，我们始终知道在哪里查找。我们不必在一堆 CSS 文件中翻找某个类名。

为此，我们应该从 styled-components 导入 ThemeProvider 组件，并提供一个主题变量。主题变量将包含我们希望在样式中使用的任何全局变量。例如，如果您为导航栏、按钮和链接使用了一个主色，那么每次使用它时都将其硬编码进去就没意义了。

使用全局主题

如果有一天你需要更新它怎么办？听起来好像需要进行大量的搜索和替换。我们可以声明全局主题变量，并从任何样式化的组件中访问它。这样做非常简单，如下所示。

由于 ThemeProvider 封装了整个应用，这些主题变量可以在任何组件中使用。之后，我们可以添加一个样式组件来包装我们的网站，该组件将负责处理所有全局样式，例如排版、输入样式以及其他所有页面都应该统一的样式。

为了演示这一点，我们来为社交卡片添加一些全局样式和内容。下面的代码不仅为社交卡片添加了必要的内容，还添加了一些应用于文本的全局样式。

这显然是一个非常基础的示例，但它可以让我们轻松掌握 Styled Components。我们还可以用它来实现一些更深入的功能，详情请参阅文档。

Styled Components 非常棒，因为它允许我们将样式放在与组件相同的文件中，而无需打开多个文件来查找正确的样式。使用 Styled Components 后，我们最终的社交卡片如下所示：

在 React 应用程序中使用 Sass

Sass 创建于几年前，最初是为 Ruby 构建的应用程序而实现的。近年来，它已被改编以兼容 Node.js，这也是我们今天使用它的方式。你可能注意到，我们创建的是“scss”文件，但却将其命名为sass。这是因为 Sass 最初是用一种名为“Sass”的语法创建的。后来，一种更接近 CSS 的替代语法被创建，称为“Scss”。由于 Scss 具有与 Sass 相同的功能，因此它仍然属于 Sass 的范畴。

在 React.js 应用程序中启动并运行 Sass 通常非常简单，尽管打包或编译应用程序的方式会有所不同。在本教程的代码中，我将使用 Parcel.js，它启动和运行起来非常容易，并且可以为我们处理 Sass。有时还需要其他库，例如node-sass、gatsby-plugin-sass或next-sass。

设置我们的Sass文件

在 React.js 应用程序中使用 Sass 有几种不同的方法。第一种是在一个文件夹中创建一个组件，并将该组件的样式作为.scss文件包含在该文件夹中，然后直接导入到组件中。我尝试过这种方法，觉得很简单，但我不太在意它的组织方式。

另一种方法是在项目中创建一个 Sass 文件夹，用于存放样式。这是我们今天要使用的组织方法。也就是说，我们将在项目中创建一个名为“Sass”的文件夹，并添加一个名为“app.scss”的文件。虽然我们可以将所有样式都放在这个 app.scss 文件中，但这样会很混乱，而且与普通 CSS 相比，效果也不大。

相反，我们将创建单独的文件，并将它们导入到 app.scss 文件中。然后，我们可以将 app.scss 文件导入到我们的 app.js 文件中，Parcel 会完成剩下的工作。

Sass文件夹的结构

关于如何组织包含样式的文件夹，人们有很多不同的意见。我们可能会花大量时间去钻研各种组织技巧，但我发现我喜欢的方式是将 Sass 文件夹的组织方式与项目相同。通常，这会转化为以下布局：

• /萨斯
  • /Components - 包含每个 React 组件的 .scss 文件的目录
  • /Pages - 一个目录，其中包含每个需要自定义样式的页面的 .scss 文件
  • /Templates（可选）- 如果使用模板，则为模板目录（用于 gatsby 等工具）
  • / _elements.scss- 网站的任何通用样式。不应包含任何用于选择器的类或 ID。
  • / _keyframes.scss（可选）-我将在网站上使用的任何关键帧或动画。
  • / _mixins.scss- 任何将被反复使用的混合（样式片段）
  • / _variables.scss- 任何将在样式中使用的变量
  • / app.scss- 导入所有其他 scss 文件的文件

关于文件名，你可能首先注意到的是，其中几个文件以下划线开头。这是因为在 Node.js 之外，Sass 实际上被编译为 CSS 文件。任何开头没有下划线的 SCSS 文件都会被编译为不同的样式表。由于我们将所有样式表都拖放到 app.scss 文件中，而不是将它们分开，所以它们都应该以下划线开头。

由于我们的应用只有一张社交媒体卡片，所以不需要所有这些。为了方便解释，我们将使用 app.scss、_variables.scss 和 _elements.scss 文件以及 components 目录。

话虽如此，让我们开始吧！

在 Sass 中设置变量

由于我们的 Styled Components 样式中有一些变量，我们可以在这里设置它们。为此，请_variables.scss在 Sass 文件中为我们的样式创建一个名为 的文件。在该_variables.scss文件中添加以下代码。

添加一些变量后，我们应该将其导入到app.scss文件中。由于我们希望在样式的任何地方使用这些变量，因此导入应该放在导入列表的顶部。下面这行代码会将这些变量添加到样式中。我们还可以看到，我们不必在导入语句中包含下划线或文件扩展名，因为 Sass 足够智能，能够理解我们的意思。

为元素创建全局样式

我们为样式组件应用程序创建了一些全局样式，将字体设置为无衬线字体，并将文本颜色设置为#333。让我们继续在 Sass 中创建这些样式。首先，我们将_elements.scss在 Sass 文件夹中创建一个文件。以下是我为此文件使用的样式，您会注意到，我使用了我们创建的变量，就像我们在样式组件中所做的那样。

现在我们可以将该_elements.scss文件导入到我们的 app.scss 文件中。看看你是否可以不用看代码就能做到。我们的 app.scss 文件现在应该如下所示：

向组件中的元素添加类

因此，我们可以在 React.js 组件中定位元素，并添加一些类和/或 ID。像 Boostrap 和 Foundation 这样的 CSS 框架需要大量的类，这可能会变得非常混乱。我最喜欢的代码是那些元素上没有 30 多个用于样式的类的代码，因此，考虑到这一点，让我们继续使用以下代码为组件添加一些类：

太棒了！让我们开始为组件添加样式吧！在 Sass 文件夹中，创建一个名为“components”的新文件夹。此文件夹将保存所有 React.js 组件的样式。通常，我会将每个组件放在一个单独的文件中。由于这是一个非常简单的应用程序，所以我们将其放在 app.js 文件中。

由于 Sass 也能处理嵌套和媒体查询，我们可以像设置样式组件一样设置样式。由于我们的 import 语句会在 app.scss 中导入变量之后执行，所以我们可以使用在该文件之前导入的任何内容。这对于 mixin（可复用的代码片段）非常有用。您甚至可以创建一种函数，传入一个参数，并在整个 mixin 代码中使用该参数。

下面的代码将使社交卡的样式看起来与我们的样式组件社交卡相同：

现在我们可以继续在 app.scss 文件中编写导入语句，以便我们引入卡片的样式。

就这样，最终的社交卡片组件就出来了，并且使用了我们的 Sass 样式。它看起来和 Styled Components 里的组件一模一样。

关于 Sass 与 Styled Components 的最终想法

如你所见，Sass 和 Styled Components 都是增强 React.js 应用程序中样式的有效方法。最终，我认为你应该选择你最喜欢的一种。我发现自己更经常使用 Sass，但我也喜欢在一些个人项目中使用 CSS-in-JS。如果你想查看或试用本文中引用的代码，可以在这里找到。