在React中编写CSS的不同方法

Jul 10, 2022 · 8 min | Updated: Nov 6, 2024

我们都熟悉将样式表链接到HTML文档的<head>的标准方式，但这只是我们编写CSS的几种方式之一。而在单页应用程序 (SPA) 中又是怎么编写样式的呢，比如在 React 项目中。

事实证明，有多种方法可以在React应用里编写CSS。有的和传统方式很像，但有的差距却很大。所以接下来统计一下我们可以使用的方式有哪些。

导入外部样式表#

顾名思义，React可以导入CSS文件。该过程类似于我们在HTML<head>中链接CSS文件的方式：

在项目目录中创建新的CSS文件。
写CSS。
将其导入React文件。比如

import "./style.css";

通常，这个导入位于文件顶部。

import { React } from "react";
import "./App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

在上面这个例子中，一个名为App.css的文件被引入了App.jsx顶部。

编写内联样式#

你过去可能听到内联样式对于可维护性等来说并不是那么好，但在某些情况它肯定是有意义的。并且可维护性在 React 中不是问题，因为 CSS 通常已经位于同一个文件中了。下面是在 React 里很简单的一个内敛样式的写法:

<div className="main" style={{ color: "red" }}>

但是，更好的方式是传入一个对象:

首先，创建一个包含不同元素样式的对象。
然后使用 style 属性将其添加到元素中。

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

实例包含一个styles对象，该对象包含另外两个对象，一个是应用到 .main class的元素，另一个用于input元素，其中包含类似于我们希望在外部样式表中看到的样式规则。然后将这些对象应用于返回标记中元素的style属性。此示例包含一个样式对象，该对象包含另外两个对象，一个用于 .main 类，另一个用于文本输入，其中包含类似于我们希望在外部样式表中看到的样式规则。然后将这些对象应用于返回标记中元素的样式属性。请注意，在引用样式时使用大括号而不是我们通常在纯 HTML 中使用的引号。

使用CSS Modules#

CSS Modules，它具有局部作用域变量的优势，可以与 React 一起使用。但是，它到底是什么？引用文档里的话来说

CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.

翻译过来即是：

CSS 模块通过将单个 CSS 文件编译成 CSS 和数据来工作。 CSS 输出是正常的全局 CSS，可以将其直接注入浏览器或连接在一起并写入到一个文件以供生产使用。该数据用于将您在文件中使用的可读名称映射到全局安全的输出 CSS。

简单来说，CSS Modules 允许我们在多个文件中使用相同的类名而不会发生冲突，因为每个类名都有一个唯一的程序名称。这在大型应用程序中特别有用。每个类名都在本地作用于导入它的特定组件。 CSS模块样式表类似于常规样式表，仅具有不同的扩展名（例如styles.module.css）。这是他们的设置方式：

创建一个以 .module.css 作为扩展名的文件。
将该模块导入 React 应用程序（就像我们之前看到的那样）
将 className 添加到元素或组件，并从导入的样式中引用特定样式。

简单例子：

@tab styles.module.css

.heading {
  color: #f00;
  font-size: 20px;
}

@tab App.jsx

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

使用 styled-components#

你用过 styled-components 吗？它非常流行，允许您在 JavaScript 中使用实际的 CSS 构建自定义组件。styled-component 基本上是一个带有样式的 React 组件。它包括独特的类名、动态样式和更好的 CSS 管理，每个组件都有自己独立的样式。在命令行中安装 styled-components npm 包：

npm install styled-components

接下来，将其导入React App：

import styled from 'styled-components'

创建一个组件并为其分配样式属性。请注意在 Wrapper 对象中使用反引号表示的模板文字：

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

上述 Wrapper 组件将被渲染为包含这些样式的div。

条件样式#

styled-components 的优点之一是组件本身是功能性的，因为您可以在 CSS 中使用 props。这为条件语句和基于state或props改变样式打开了大门。这里是个代码演示：

import { useState } from "react";
import styled from "styled-components";
function App() {
  // display state
  const [display, setDisplay] = useState(true);
  return (
    <>
      <Wrapper $display={display} />
      <button onClick={() => setDisplay(!display)}>Toggle</button>
    </>
  );
}
// the wrapper styled component
const Wrapper = styled.div`
  width: 100%;
  height: 100px;
  background-color: red;
  display: ${(props) => (props.$display ? "block" : "none")};
`;
export default App;

在这里，我们操作 div 的display属性。此状态由一个按钮控制，单击该按钮会切换 div 的状态。反过来，这会在两种不同状态的样式之间切换。在内联 if 语句中，我们使用 ? 而不是通常的 if/else 语法。 else 部分在分号之后。记住始终在初始化后调用或使用状态。例如，在最后一个演示中，状态应该位于 Wrapper 组件的样式之上。

收尾#

我们研究了几种在 React 应用程序中编写样式的不同方法。并不是说一个比其他的好；当然，您使用的方法取决于具体情况。希望现在你已经对它们有了很好的理解，并且知道你的 React 样式库中有一堆工具。

> cd ..