我有一個反應專案，它有兩個頁面，每個頁面都有自己的 css 檔案。
1- Page1.jsx -> Page1.css
2- Page2.jsx -> Page2.css
每個 css 檔案只包含在其對應的 jsx 檔案中。兩個 css 檔案共享相似的類名（例如：column、image-place 等）
問題是 Page1 受 Page2 CSS 檔案的影響。
我不是前端技術專家。任何幫助將不勝感激。
uj5u.com熱心網友回復：
避免沖突的一種可能方法是使用Sass。您可以通過在您的react應用程式檔案夾中鍵入來設定它termainal：
npm i node-sass --save
然后將所有.css檔案轉換為.scss. class在每個頁面的頂級包裝器上添加一個唯一的，例如：
retrun (<div className = "pageOne">
<img src = "/myImage" className = "image-place"/>
</div>)
最后，您的樣式將如下所示：
.pageOne {
.image-place {
width:200px
}
.column {
width:200px
}
}
這樣，您將class在頂級包裝器中擁有唯一的一個，并且其中有許多class具有相同名稱的包裝器。
uj5u.com熱心網友回復：
你在使用 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
}轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386069.html