javascript - 如何避免 React 组件中的 CSS 冲突？

Question

我有一个 React 元素，它有两个页面，每个页面都有自己的 css 文件。

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

每个 css 文件只包含在其对应的 jsx 文件中。两个 css 文件共享相似的类名(例如: column 、 image-place 等)。问题是 Page1受 Page2 影响的 CSS 文件。
我不是前端技术方面的专家。任何帮助将不胜感激。

Answer 1

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

CSS Modules allows the scoping of CSS by automatically creating aunique classname

//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>