ReactJS - 样式

一般来说，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 组件的样式。

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

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

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

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

内联样式

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

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

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

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

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

CSS 模块

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

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

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

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

在这里，文件命名约定非常重要。React 工具链会通过 CSS 模块对以 .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 命令为应用程序提供服务。

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