css - React 和 CSS 样式

Question

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

组件 1 和组件 2

Page1代码

<Component1/>
<Component2/>

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

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

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

Answer 1

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

元素树如下:

组件:

• 按钮
  • Button.js
  • Button.module.css
• 表单
  • Form.js
  • Form.module.css
• 头像
  • Ava​​tar.js
  • Ava​​tar.module.css

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

使用方法:

1. 创建 react 应用程序
2. 安装css-loader
3. 使用附加组件 module 创建 css 文件，文件名为 ex: styles.css => styles.module.css<

4.导入样式到组件:

从“./styles.modules.css”导入样式

5.给JSX标签添加类名

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

1. 开始使用普通 CSS 为您的组件设计样式