React 项目中的 CSS 文件冲突答案

【问题标题】：Conflicting CSS files in React projectReact 项目中的 CSS 文件冲突
【发布时间】：2022-06-24 05:03:00
【问题描述】：

我有一个 react 项目，它有两个页面，每个页面都有自己的 css 文件。

1- Page1.jsx -> Page1.css
2- Page2.jsx -> Page2.css

每个 css 文件只包含在其对应的 jsx 文件中。两个 css 文件共享相似的类名（例如：column、image-place 等）

问题是Page1受Page2 CSS文件影响。

我不是前端技术方面的专家。任何帮助将不胜感激。

【问题讨论】：

标签： css reactjs

【解决方案1】：

你在使用 create-react-app 吗？

如果是这样，请改用 css-modules https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

CSS 模块通过自动创建一个唯一的类名

//Page1.jsx
import React from 'react';
import styles from './page1.module.css'; // Import css modules stylesheet as styles

export const Page1 = () => {
  return (
    <div className={styles.column}>page1</div>
  )
}

/* page1.module.scss */
.column {
  color: red
}

//Page2.jsx
import React from 'react';
import styles from './page2.module.css'; // Import css modules stylesheet as styles

export const Page2 = () => {
  return (
    <div className={styles.column}>page2</div>
  )
}

/* page2.module.scss */
.column {
  color: green
}

如果您想将它们与普通或外部 css 类（bootstrap、tailwind 等）结合使用，请尝试以下操作：

&lt;div className={`${styles.column} overflow-auto`}&gt;page1&lt;/div&gt;

【讨论】：

谢谢，看来可以了。如果你能帮忙，我现在有一个新问题。我曾经有 className="column overflow-auto" 并且 overflow-auto 来自引导程序。如何组合它们？
当然，我会把它添加到答案中
答案已编辑，希望对您有所帮助！

【解决方案2】：

避免冲突的一种可能方法是使用Sass。您可以通过输入您的react 应用程序文件夹terminal 来进行设置：

npm i sass --save-dev

然后将所有.css 文件转换为.scss。在每个页面的顶层包装器上添加一个唯一的class，例如：

retrun (<div className = "pageOne">
  <img src = "/myImage" className = "image-place"/>
</div>)

最后你的样式将如下所示：

.pageOne {

  .image-place {
    width:200px
  }
  
  .column {
    width:200px
  }
  
}

这样，您将在顶级包装器中拥有一个唯一的class，并且其中有多达class 具有相同的名称。

【讨论】：