我有一个 React 元素,它有两个页面,每个页面都有自己的 css 文件。
Page1.jsx -> Page1.css
Page2.jsx -> Page2.css
每个 css 文件只包含在其对应的 jsx 文件中。两个 css 文件共享相似的类名(例如: column
、 image-place
等)。问题是 Page1
受 Page2
影响的 CSS 文件。我不是前端技术方面的专家。任何帮助将不胜感激。
最佳答案
你在使用 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 a unique 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>
关于javascript - 如何避免 React 组件中的 CSS 冲突?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70410381/