ReactJS - 样式

上一页
下一页

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

  • CSS 样式表 - 常规 CSS 样式以及 className

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

  • CSS Modules - 局部作用域的 CSS 样式。

  • Styled Components - 组件级别的样式。

  • Sass 样式表 - 通过在构建时将样式转换为常规 css 来支持基于 Sass 的 CSS 样式。

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

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

  • CSS 样式表

  • 内联样式

  • CSS Modules

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

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

CSS Stylesheet

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

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

Inline Styling

CSS Modules

CSS Modules 提供了最安全也是最简单的定义样式的方法。它使用带有常规语法的常规 css 样式表。在导入样式时，CSS Modules 会将所有样式转换为局部作用域样式，这样就不会发生名称冲突。让我们更改我们的组件以使用 CSS Modules

在您喜欢的编辑器中打开 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 Modules。

最终完整的代码是：

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

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

CSS Modules
打印页面
上一页
下一页
广告