ReactJS - 样式

更新于 2025/3/24 9:52:17

一般来说，React 允许通过 className 属性使用 CSS 类对组件进行样式化。由于 React JSX 支持 JavaScript 表达式，因此可以使用许多常见的 CSS 方法。一些顶级选项如下 −

CSS 样式表 − 普通 CSS 样式以及 className
内联样式 − CSS 样式作为 JavaScript 对象以及 camelCase 属性。
CSS 模块 − 本地范围的 CSS 样式。
样式化组件 − 组件级样式。
Sass 样式表 −通过在构建时将样式转换为普通 css 来支持基于 Sass 的 CSS 样式。
后处理样式表 − 通过在构建时将样式转换为普通 css 来支持后处理样式。

在本章中，让我们学习如何应用三种重要方法来设计我们的组件样式。

CSS 样式表
内联样式
CSS 模块

CSS 样式表

CSS 样式表 是一种常用、常见且久经考验的方法。只需为组件创建一个 CSS 样式表，然后输入该特定组件的所有样式即可。然后，在组件中，使用 className 引用样式。

让我们为 ExpenseEntryItem 组件设置样式。

在您最喜欢的编辑器中打开 expense-manager 应用程序。

接下来，打开 ExpenseEntryItem.css 文件并添加一些样式。

div.itemStyle { 
   color: brown; 
   font-size: 14px; 
}

接下来，打开 ExpenseEntryItem.js 并将 className 添加到主容器。

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

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className="itemStyle">
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

接下来，使用 npm 命令为应用程序提供服务。

npm start

接下来，打开浏览器并在地址栏中输入 http://localhost:3000 并按回车键。

CSS 样式表易于理解和使用。但是，当项目大小增加时，CSS 样式也会增加，最终会在类名中产生大量冲突。此外，直接加载 CSS 文件仅在 Webpack 捆绑器中受支持，其他工具可能不支持。

内联样式

内联样式 是设置 React 组件样式的最安全方法之一。它使用基于 DOM 的 css 属性将所有样式声明为 JavaScript 对象，并通过 style 属性将其设置为组件。

让我们在组件中添加内联样式。

在您最喜欢的编辑器中打开 expense-manager 应用程序并修改 src 文件夹中的 ExpenseEntryItem.js 文件。声明一个对象类型的变量并设置样式。

itemStyle = {
   color: 'brown', 
   fontSize: '14px' 
}

此处，fontSize 表示 css 属性 font-size。所有 css 属性都可以通过 camelCase 格式表示来使用。

接下来，使用花括号 {} 在组件中设置 itemStyle 样式 −

render() {
   return (
      <div style={ this.itemStyle }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

此外，还可以直接在组件内部设置样式 −

render() {
   return (
      <div style={
         {
            color: 'brown',
            fontSize: '14px'
         }         
      }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

现在，我们已经成功地在应用程序中使用了内联样式。

接下来，使用 npm 命令为应用程序提供服务。

npm start

接下来，打开浏览器并在地址栏中输入 http://localhost:3000，然后按 Enter。

CSS 模块

Css 模块 提供了最安全且最简单的定义样式的方法。它使用具有正常语法的正常 css 样式表。在导入样式时，CSS 模块会将所有样式转换为本地范围的样式，这样就不会发生名称冲突。让我们将组件更改为使用 CSS 模块

在您最喜欢的编辑器中打开Expense Manager(费用管理器)应用程序。

接下来，在 src/components 文件夹下创建一个新的样式表 ExpenseEntryItem.module.css 文件，并编写常规 css 样式。

div.itemStyle {
   color: 'brown'; 
   font-size: 14px; 
}

这里文件命名规范很重要，React 工具链会通过 CSS Module 对以 .module.css 结尾的 css 文件进行预处理，否则会被视为普通样式表。

接下来，打开 src/component 文件夹中的 ExpenseEntryItem.js 文件，并导入样式。

import styles from './ExpenseEntryItem.module.css'

接下来，在组件中将样式用作 JavaScript 表达式。

<div className={styles.itemStyle}>

现在，我们已经成功地在应用程序中使用了 CSS 模块。

最终完整的代码是 −

import React from 'react';
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css'

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className={styles.itemStyle} >
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

接下来，使用 npm 命令为应用程序提供服务。