在本步骤中，你将构建一个示例 Alert 组件，用于在网页上显示警告信息。你将使用纯 CSS 来为其添加样式，并直接导入到组件中。这将确保组件的样式与组件的 JavaScript 和 JSX 紧密耦合。你还将创建一个实现 Alert 组件的组件，以了解样式如何影响子元素，以及如何使用 props 动态更改样式。

完成本步骤后，你将创建出几个直接导入纯 CSS 的组件。

构建 Alert 组件

首先，创建一个新的 Alert 组件。先创建目录：

mkdir src/components/Alert

接下来，打开 Alert.js：

nano src/components/Alert/Alert.js

添加一个基本的组件，返回字符串 Alert：

import React from 'react';

export default function Alert() {
  return <div>Alert</div>
}

保存并关闭文件。

接下来，打开 App.js：

nano src/components/App/App.js

导入 Alert 组件，并在 <div> 中渲染它，添加突出显示的代码：

import React from 'react';
import './App.css';

import 第 3 步 — 使用 Style Objects 进行样式设置

在本步中，你将使用style objects来样式化你的组件，这些是使用 CSS 属性作为键的 JavaScript 对象。在处理组件时，你将更新键以匹配 JavaScript 语法，并学习如何根据组件 props 动态设置样式属性。
独立的 CSS 是样式化 HTML 最常见的方式。这种方法速度快，浏览器能够高效地快速且一致地应用样式。但这并不是样式化 HTML 的唯一选项。在标准 HTML 中，你可以使用 style 属性直接在元素上设置内联样式，该属性接受一个包含要应用的样式的字符串。
style objects 的最佳用途之一是动态计算样式。这特别有用，如果你需要知道元素的当前位置，因为位置只有在元素渲染后才能确定，因此只能动态处理。
手动编写样式字符串很难操作，并且容易引入 bug。缺少颜色或分号会破坏整个字符串。幸运的是，在 JSX 中，你不仅仅局限于字符串。style 属性也可以接受包含样式的对象。这些样式名称需要使用camelCase而不是kebab-case。
使用这种内联样式的最大优势是，由于你使用 JavaScript 构建样式，你可以动态设置 CSS 属性，而不是动态设置 class。这意味着你可以完全不使用 CSS class，避免潜在的名称冲突，并允许你在运行时计算样式。
要使用 style objects，首先重构App.js。首先打开该文件：

nano src/components/App/App.js


在组件内部，移除导入的App.css文件，然后创建一个具有padding值为20的对象，并使用style属性将该对象传递给<div>：
styling-tutorial/src/components/App/App.js
import React from 'react';

import Alert from '../Alert/Alert';
import CartSuccess from '../CartSuccess/CartSuccess';

function App() {
  const wrapper = {
    padding: 20
  };

  return(
    <div style={wrapper}>
      第 4 步 — 使用 JSS 进行样式设计

在本步骤中，你将使用流行的库 JSS 来设计对象样式。你将安装这个新库，并将你的样式对象转换为 JSS 对象。然后，你将重构代码，使用动态生成的 class name 来避免模块间 class name 冲突。你还将构建 JavaScript 样式对象，这些对象可以动态设置样式，并使用嵌套属性来创建特定的样式规则。
JSS 是一个用于创建 CSS-in-JS 的库。这种方法有多种不同的用例和选项，但本教程的主要优势在于它会创建动态 class name，避免组件之间的冲突。你还可以利用 JavaScript 语法，这意味着你可以使用变量并基于 React props 创建样式。
首先，安装 React 专用的 JSS 版本。本教程将使用版本 10.1.1：

npm install react-jss


该包将安装几个依赖项，包括多个 JSS 插件，这些插件将使你能够编写简洁的样式规则。
安装完成后，你将看到成功消息：

输出
+ react-jss@10.1.1
added 281 packages from 178 contributors, removed 142 packages, updated 1392 packages and audited 1025251 packages in 144.872s

你的输出可能会因 Node 版本和其他依赖项而略有不同。
现在库已经安装完成，将 App.js 转换为使用 JSS。首先，打开 App.js：

nano src/components/App/App.js


使用 JSS 有两个步骤。首先，你需要导入一个函数来创建 自定义 hook。Hook 是 React 在每次组件渲染时运行的函数。在 JSS 中，你需要在组件外部传递样式定义来创建 hook。这将防止代码在每次重新渲染时运行；由于样式定义是静态的，没有理由运行多次。
通过进行突出显示的更改来创建 hook 和样式对象：
styling-tutorial/src/components/App/App.js
import React from 'react';
import { createUseStyles } from 'react-jss';

import Alert from '../Alert/Alert';
import CartSuccess from '../CartSuccess/CartSuccess';

const useStyles = createUseStyles({
  wrapper: {
    padding: 20,
  }
});

function App() {
  return(
    <div>
      <Alert title="Items Not Added" type="error">
        <div>Your items are out of stock.</div>
      </Alert>
      <CartSuccess />
    </div>
  )
}

export default App;

注意在这种情况下，你的样式对象包含一个名为 wrapper 的对象，其中使用相同的驼峰命名格式包含样式。对象的名称——wrapper——是创建动态 class name 的基础。
创建 hook 后，你通过在组件内部执行函数来使用它。这会注册 hook 并动态创建样式。进行以下突出显示的更改：
styling-tutorial/src/components/App/App.js
import React from 'react';
import { createUseStyles } from 'react-jss'

import Alert from '../Alert/Alert';
import CartSuccess from '../CartSuccess/CartSuccess';

const useStyles = createUseStyles({
  wrapper: {
    padding: 20,
  }
});

function 结论

在本教程中，您开发了几个可重用的组件，这些组件使用了不同的样式技术。您已经了解到 style objects 和 JSS 如何使用与标准 CSS 属性密切对应的名称来创建对象，并且创建了可以根据传入属性动态设置样式的组件。您还学习了不同的方法如何为处理名称冲突和可重用性提供不同的选项。
与大多数 React 技术一样，没有单一的最佳解决方案。相反，您可以选择最适合您项目的样式选项。有了这些选项，您可以从简单的东西开始，随着项目增长或需求变化进行重构，同时确信您的组件将继续满足您的样式目标。
如果您想查看更多 React 教程，请查看我们的 React 主题页面，或返回 How To Code in React.js 系列页面。