如何在React组件内避免CSS冲突？

Question

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

Page1.jsx -> Page1.css
Page2.jsx -> Page2.css

每个CSS文件仅在其对应的JSX文件中被包含。两个CSS文件共享类似的类名（例如：column，image-place等）。问题在于Page1受Page2的CSS文件的影响。

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

- Mohammed Alswailem

Answer 1

您正在使用create-react-app吗？

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

CSS Modules 可以通过自动创建唯一的类名来实现对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等）组合在一起，可以尝试以下方法：

<div className={`${styles.column} overflow-auto`}>page1</div>

- Andara

---

谢谢，看起来它正在工作。如果您能帮忙，我现在有一个新问题。我曾经使用className="column overflow-auto"，而overflow-auto是来自bootstrap的。如何将它们结合起来？ - Mohammed Alswailem

好的，我会把这个加到答案里。 - Andara

回答已编辑，希望有所帮助！ - Andara

Answer 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。

- Youssouf Oumar

---

这个不用 SCSS 也可以做吗？ - arrmani88