如何在React 中實現組件範圍的CSS
在React 中，通常將CSS 檔案匯入到元件中以設定其元素的樣式。但是，必須確保這些 CSS 樣式的範圍僅限於元件本身，從而防止與其他元件的樣式發生衝突。
理解問題
預設情況下，匯入React 元件中的CSS 檔案使它們的樣式全域化，這表示它們適用於應用程式中的所有元件。這可能會導致不必要的樣式衝突以及難以保持一致的樣式。
解決方案：CSS 模組
CSS 模組是一種提供組件範圍 CSS 的技術。它為每個組件產生的 CSS 類別分配唯一且隨機的雜湊值。這可確保樣式僅套用於匯入 CSS 檔案的元件內的元素。
範例：
考慮以下元件結構：
About/style.css:
.AboutContainer {
# Some style
}
p > code {
# Some style
}
About/index.js:
import './style.css';
// Component definition...如上所示導入CSS 檔案會導致CSS 套用於中的所有元件
使用CSS模組的解決方案：
要使CSS 元件作用域，請更新程式碼如下：
import styles from './style.css'; // Component definition...
這可確保這些樣式對於「關於」元件是唯一的，不會影響其他組件。
替代方法：基於類別的樣式
CSS 模組的替代方案是對組件及其元素採用基於類別的命名約定。例如，不要使用通用選擇器（p、程式碼），而是使用特定的類別名稱：
.aboutContainer {
# Some style
}
.aboutContainer__code {
# Some style
}此方法還透過確保樣式僅套用於預期元件內的元素來幫助防止樣式衝突。
以上是如何在 React 應用程式中實現元件範圍的 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
