首頁 > web前端 > css教學 > React 中的 CSS 衝突

React 中的 CSS 衝突

WBOY
發布: 2024-08-29 15:06:04
原創
727 人瀏覽過

UI 是我們開始輸入邏輯完成前端之前的第一步。因此,我們編寫標記,然後編寫獲得所需使用者介面所需的基本樣式。在編寫標記時,我們必須建立有意義的類別名稱來尋址和存取 HTML 標記並向其添加樣式。透過簡單的使用者介面和不同的標籤,我們可以或多或少輕鬆地做到這一點。在編寫重複且複雜的 UI 時,給予有意義且獨特的名稱會成為一場災難,因為只有幾個通用名稱。因此,我們為各個元件建立元件和樣式表。如下圖。

CSS conflict in React

我們可以看到兩個元件 GreenContainer 和 RedContainer 正在從 src 內的 Components 資料夾匯入到 App.js 中。它們各自的樣式表是 RedContainer.css 和 GreenContainer.css,它們是從 styles 資料夾匯入的。讓我們一一看看組件及其樣式表。

第一個元件,RedContainer.jsx

CSS conflict in React

對應的樣式表是 - RedContainer.css

CSS conflict in React

現在看看第二個元件,GreenContainer.js -

CSS conflict in React

第二個元件的 CSS 檔案 GreenContainer.css

CSS conflict in React

兩個樣式表都為其各自的元件包含不同的 CSS 屬性。因此,預期的 UI 結果可能是一個有兩個塊的螢幕,一個是帶有 150 像素臂的紅色方塊,另一個是帶有 200 像素臂的綠色方塊。讓我們看看渲染後的 React 應用程式。

CSS conflict in React

為什麼會發生這種情況?最後一個容器的 CSS 屬性已套用於兩個容器。但如何呢?答案是在React 應用程式渲染之前,所有樣式表都被編譯到一個CSS 檔案中,其中有兩個同名的類別選擇器- “.container”,這就是為什麼CSS 屬性來自最後一個“.container{” } 」已應用於全球所有容器。這個問題可以透過使用CSS 模組來解決。 CSS 模組是CSS 文件,預設所有類別名稱的範圍都是本地的。這可以透過以下方式幫助我們

1) 將樣式在地化到特定元件可以防止這種全域範圍衝突。

2) 允許在不同模組中使用相同的類別名稱並促進模組化樣式。

要使用模組化樣式,我們必須將“.css”替換為“.module.css”,並從這些檔案中匯入“樣式”。

CSS conflict in React

將樣式匯入到各自的元件中。對於 RedContainer -

CSS conflict in React

對於 GreenContainer

CSS conflict in React

一般情況下,我們將className寫成這樣的字串,如果className是“container”,我們會寫className = "container"。對於 CSS 模組,我們將在 jsx 檔案中寫這樣的類別名稱 className = {styles.container}。現在讓我們來看看渲染的 React 應用程式 -

CSS conflict in React

現在不存在 CSS 衝突問題,且樣式已正確應用於各個元件。

以上是React 中的 CSS 衝突的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板