React和CSS样式

Question

在我的页面中，我必须使用两个React组件

Component1和Component2

第1页代码

<Component1/>
<Component2/>

所有组件样式均来自组件CSS文件。但是对于页面布局，我有page1.css

我要编写选择器和类名，并为page1.css定义样式。

可能会有许多页面和具有相似类名的不同布局，我们如何控制不具有覆盖样式的行为。

Answer 1

您只能使用特定于该组件的css：

page1.js

import './page1.css'
// page1 component

我认为page1组件的文件夹结构如下：

page1/
  page1.css
  page1.js

Answer 2

您可以使用CSS模块将样式应用于每个组件，它工作得很好，易于管理代码，它也是本地选择器，因此两个组件之间没有冲突。

项目树将类似于：

组件：

• 按钮
  • Button.js
  • Button.module.css
• 表格
  • Form.js
  • Form.module.css
• 头像
  • Avatar.js
  • Avatar.module.css

每个组件都有一个唯一的css文件，因此在扩展时很容易维护代码。

使用方法：

1. create-react-app
2. 安装css-loader
3. 使用附件 module 创建css文件，其文件名为ex：styles.css => styles.module.css

4。将样式导入组件：

import styles from './styles.modules.css'

5。将类名添加到JSX标记

    <div className={styles.header}> Hello world</div>

1. 开始使用普通CSS样式化组件