ReactJS - 样式

一般来说，React 允许通过 className 属性使用 CSS 类来设置组件的样式。由于React JSX支持JavaScript表达式，因此可以使用许多常见的CSS方法。一些最重要的选项如下 -

  • CSS 样式表- 普通 CSS 样式以及className

  • 内联样式- CSS 样式作为 JavaScript 对象以及驼峰式属性。

  • CSS 模块- 本地范围的 CSS 样式。

  • 样式化组件- 组件级别样式。

  • Sass stylesheet - 通过在构建时将样式转换为普通 CSS 来支持基于 Sass 的 CSS 样式。

  • 后处理样式表- 通过在构建时将样式转换为普通 CSS 来支持后处理样式。

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

  • CSS 样式表

  • 内联样式

  • CSS 模块

CSS 样式表

CSS 样式表是常用的、通用的且经过时间考验的方法。只需为组件创建 CSS 样式表并输入该特定组件的所有样式即可。然后，在组件中，使用 className 来引用样式。

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

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

接下来，打开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 样式也会增加，最终会在类名中产生很多冲突。此外，直接加载CSS文件仅在Webpack捆绑器中支持，在其他工具中可能不支持。

内联样式

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

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

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

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

这里，fontSize代表css属性font-size。所有 css 属性都可以通过以驼峰格式表示来使用。

接下来，使用大括号 {} 在组件中设置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并按回车键。

内联样式

CSS 模块

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

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

接下来，在 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 命令为应用程序提供服务。

npm start

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

CSS 模块