使用 CSS 设计 React 样式的 5 种方法 [2023]

作者
Tweet
Share
Share
Pin
0 Shares

为何 CSS 是网页设计的基石？

令人惊讶的是，超过 97% 的网站都依赖 CSS 来实现其视觉呈现效果。

层叠样式表（CSS）是开发人员打造美观、易于浏览且视觉吸引力的网页的关键。

CSS 语言负责定义文档如何向用户展示。这里的文档指的是使用标记语言（如 XML 或 HTML）编写的文件。

React 中样式化的概念

React 应用的创建、运行和维护的简便性是其受欢迎程度的关键。React 本质上是一个 JavaScript 库，而非框架，它不仅提供预先编写的函数和代码片段。

React 之所以能在众多 JavaScript 框架和库中脱颖而出，部分原因在于其组件的可重用性、灵活性、代码稳定性、速度和高性能。

在 React 中，样式化是指利用 CSS 来提升 React 应用中各种组件视觉吸引力的过程。重要的是，React 使用 JSX (JavaScript 和 XML) 作为其标记语言，而非 HTML。一个主要差异是，HTML 使用 .class 来定义类，而 JSX 使用 .className 来表示类。

为何选择 CSS 为 React 应用添加样式？

  • 提高应用的响应性： 现代网络应用应能在各种屏幕尺寸上访问。CSS 允许你为 React 应用应用媒体查询，使其适应不同的屏幕尺寸。
  • 加速开发过程： 你可以在 React 应用的多个组件中复用相同的 CSS 规则。
  • 增强 React 应用的可维护性： 使用 CSS 可以轻松修改应用的特定组件或部分的外观。
  • 改善用户体验： CSS 可以实现用户友好的格式。带有逻辑排列的文本和按钮的 React 应用易于导航和使用。

开发人员可以采用多种方式为他们的 React 应用添加样式。以下是一些最常见的方法：

内联样式的实践

内联样式是为 React 应用设置样式的最直接方式，因为用户无需创建外部样式表。 CSS 样式直接应用在 React 代码中。

需要注意的是，内联样式的优先级高于其他样式。因此，如果存在外部样式表，内联样式将会覆盖它。

以下是一个 React 应用中内联样式的示例：

  import React from 'react';
  import ReactDOM from 'react-dom/client';

  const Header = () => {
    return (
      <>
        <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
        <h2>Add a little style!</h2>
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Header />);

示例中的元素将显示一个浅蓝色背景的 h1 标题。

内联样式的优点

  • 快速： 这是最直接的方法，你可以直接将样式添加到需要设置样式的标签。
  • 高优先级： 内联样式覆盖外部样式表。因此，你可以用它来专注于特定功能，而无需更改整个应用。
  • 原型设计利器： 在将格式合并到外部样式表之前，你可以使用内联样式来测试功能。

内联样式的缺点

  • 繁琐： 直接为每个标签设置样式非常耗时。
  • 功能有限： 你无法将选择器和动画等 CSS 功能与内联样式一起使用。
  • 降低代码可读性： 许多内联样式会使 JSX 代码难以阅读。

导入外部样式表的方法

你可以在外部文件中编写 CSS，并将其导入到 React 应用中。这种方法类似于在 HTML 文档的 <head> 标签中导入 CSS 文件。

为此，你需要在应用目录中创建一个 CSS 文件，将其导入目标组件并为你的应用编写样式规则。

为了演示外部 CSS 样式表的工作方式，你可以创建一个 CSS 文件并将其命名为 App.css。然后你可以按如下方式导出它。

    import { React } from "react";
    import "./Components/App.css";

    function App() {
      return (
        <div className="main">
        </div>
      );
    }

    export default App;

以上代码片段将外部样式表导入 App.js 组件。 App.css 文件位于 Components 文件夹中。

外部 CSS 样式表的优点

  • 可重用： 你可以在 React 应用的不同组件中重复使用相同的 CSS 规则。
  • 提高代码表达力： 使用外部样式表时，理解代码会变得很容易。
  • 允许访问高级 CSS 功能： 你可以在使用外部样式表时使用伪类和高级选择器。

外部 CSS 样式表的缺点

  • 需要严格的命名约定： 需要可靠的命名约定，以确保样式不会被覆盖。

CSS 模块的运用

React 应用可能会变得非常庞大。默认情况下，CSS 动画名称和类名称的作用域是全局的。在处理大型样式表时，此设置可能会带来问题，因为一种样式可能会覆盖另一种样式。

CSS 模块通过在本地限定动画和类名称的作用域来解决这个问题。这种方法确保类名仅在需要它们的文件或组件中可用。每个类名都有一个唯一的编程名称，从而避免冲突。

要实现 CSS 模块，请创建一个以 .module.css 结尾的文件。例如，如果你想将样式表命名为 style，则文件名为 style.module.css。

将创建的文件导入到你的 React 组件中，你就可以开始使用了。

你的 CSS 文件可能如下所示：

/* styles.module.css */
    .font {
      color: #f00;
      font-size: 30px;
    }

你可以按如下方式在 App.js 上导入 CSS 模块：

import { React } from "react";
import styles from "./styles.module.css";

function App() {
  return (
    <h1 className={styles.heading}>Hello techblik.com reader</h1>
  );
}

export default App;

使用 CSS 模块的优点

  • 轻松与 SCSS 和 CSS 集成
  • 避免类名冲突

使用 CSS 模块的缺点

  • 初学者可能对使用 CSS 模块引用类名感到困惑。

样式化组件的优势

样式化组件允许开发人员在 JavaScript 代码中使用 CSS 创建组件。样式化组件充当带有样式的 React 组件。它提供动态样式和独特的类名。

要开始使用 Styled Components，你可以使用以下命令将软件包安装到根文件夹中：

npm install styled-components

下一步是将样式化组件导入到你的 React 应用中。

以下是使用 Styled Components 的 App.js 代码片段：

import { React } from "react";
import styled from "styled-components";

function App() {
  const Wrapper = styled.div`
    width: 80%;
    height: 120px;
    background-color: lightblue;
    display: block;
  `;
  return <Wrapper />;
}

export default App;

呈现的应用程序将具有从 Styled Components 导入的上述样式。

样式化组件的优点

  • 可预测： 此样式方法中的样式嵌套在各个组件中。
  • 无需关注类的命名约定： 你只需编写你的样式，软件包会处理剩下的事情。
  • 可导出为 props： Styled Components 将普通 CSS 转换为 React 组件。因此，你可以重用此代码，通过 props 扩展样式并导出。

样式化组件的缺点

  • 你必须安装第三方库才能开始使用。

语法上很棒的样式表 (SASS/ SCSS)

SASS 具有普通 CSS 所不具备的更强大的工具和功能。你可以使用两种不同的风格来编写样式： .scss 和 .sass。

SASS 的语法类似于普通的 CSS。但是，在 SASS 中编写样式规则时，不需要使用大括号。

一个简单的 SASS 代码片段如下所示：

nav
  ul
    margin-right: 20px
    padding: 0
    list-style: list
  li
    display: block
  a
    display: block
    padding: 6px 12px
    text-decoration: underline
nav

要在你的 React 应用中使用 SASS，你需要先将 SASS 编译为纯 CSS。通过 Create React App 命令设置你的应用程序后，你可以安装 node-sass 来处理编译。

npm install node-sass

然后，你可以创建你的文件并为它们提供 .scss 或 .sass 扩展名。然后，你可以按正常方式导入文件。例如：

import "./Components/App.sass";

SASS/SCSS 的优点

  • 它提供了许多动态功能，例如混合、嵌套和扩展。
  • 使用 SASS/SCSS 时，你无需大量样板文件来编写 CSS 代码。

SASS/SCSS 的缺点

  • 样式是全局的，因此你可能会遇到优先级问题。

哪种是最佳的样式方法？

既然我们已经讨论了五种方法，你可能会想知道哪种方法最好。很难在这场讨论中指出绝对的赢家。但是，以下考虑因素将帮助你做出明智的决定：

  • 性能指标
  • 是否需要设计系统
  • 优化代码的难易程度

当你的应用程序只有几行代码时，内联样式非常适用。但是，所有其他方法，包括外部样式表、SASS、Styled Components 和 CSS 模块，更适合大型应用程序。

在大型 React 应用程序中维护 CSS 的最佳实践是什么？

  • 避免内联样式： 在大型 React 应用中为每个标签编写内联 CSS 样式可能会很累人。相反，请使用适合你需求的外部样式表。
  • 整理你的代码： Stylelint 等 Linter 会突出显示代码中的样式错误，以便你可以及早修复它们。
  • 定期进行代码审查： 编写 CSS 看起来很有趣，但定期的代码审查可以很容易地及早发现错误。
  • 自动测试你的 CSS 文件： Enzyme 和 Jest 是非常棒的工具，可用于自动测试 CSS 代码。
  • 保持代码简洁： 在处理常用样式（例如颜色和边距）时，请使用实用变量和类，因为它符合“不要重复自己”(DRY) 原则。
  • 使用命名约定： 例如块元素修饰符（BEM）。这种方法可以轻松编写易于理解和重用的 CSS 类。

结论

以上是你可以用来为 React 设置样式的一些方法。样式方法的选择将取决于你的需求、技能和偏好。你甚至可以在 React 应用中组合多种样式设置方法，例如内联样式和外部样式表。

你还可以探索一些前端开发人员可用的最佳 CSS 框架和库。