如何避免 ReactJs 中的 CSS 冲突

Question

我根本不是反应方面的专家，但从我可以看到，如果我导入一些CSS表，这些将适用于我的所有应用程序。如果我想将 React 用于多页面应用程序，如何为每个页面定义 css 表？

我的文件结构

第1页

import React, { Component } from "react";
import "./style.css";

export default class Page1 extends Component {
  render() {
    return (
      <div>
        <button>with css</button>
      </div>
    );
  }
}

第2页

import React, { Component } from "react";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <button>no css</button>
      </div>
    );
  }
}

样式.css

button {
  background: green;
}

此样式只能应用于第一页，但也适用于第二页。我该如何解决这个问题？

Answer 1

避免 Reactjs 上页面之间 css 冲突的最简单方法是使用css-modules（它不是依赖项），只需将页面样式表名称从 ' my-stylesheet.css ' 更改为 ' my-stylesheet.module.css ' 并导入它为“ my-stylesheet.module.css ”。

Answer 2

有两种不同的方法可以使用：

• CSS 模块
• JS 中的 CSS

这篇短文对两者进行了比较。我更喜欢 CSS 模块。

如何使用CSS模块？

设置

1. 假设您的 CSS 文件被命名styles.css为一个模块，您需要将其更改为styles.module.css
2. 像这样导入 CSS 文件import styles from './styles.module.css'（您可以使用任何其他名称代替styles）

命名

<div className={styles.box_one}>
   some content
</div>

重要提示：确保 CSS 文件中的类已命名.box_one，而不是.box-one

我个人的喜好

我会像这样import s from './styles.module.css'使用s而不是导入styles为了使代码更干净而导入。

我的 JSX 如下所示

<div className={s.box_one}>
   some content
</div>