React 和 CSS 样式

Question

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

组件1和组件2

第1页代码

<Component1/>
<Component2/>

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

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

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

Answer 1

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

项目树如下：

组件：

• 按钮
  • Button.js
  • Button.module.css
• 表格
  • Form.js
  • Form.module.css
• 头像
  • 头像.js
  • 头像.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>

6. 开始使用普通 CSS 设置组件样式

Answer 2

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

page1.js

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

我想page1组件文件夹结构如下：

page1/
  page1.css
  page1.js