我創建了一個新的 React.js 應用程式，使用create-react-app.
對于每個組件（例如src/components/ComponentX.js），我創建了一個單獨的樣式表（src/styles/ComponentX.css），并按如下方式匯入它import "../styles/ComponentX.css"。
這反過來又導致<style>...</style>每個頁面上每個匯入的樣式表都有一個單獨的部分。因此，樣式表是全域的（這對 SPA 有意義嗎？），盡管沒有像這里描述的那樣連接：
在開發中，以這種方式表達依賴關系允許您在編輯樣式時即時重新加載樣式。在生產中，所有 CSS 檔案將在構建輸出中連接成一個縮小的 .css 檔案。
由于它似乎不會影響 React.js 應用程式的功能，在哪里匯入樣式表，我應該在哪里匯入我的樣式表？本地的組件或src/index.js？
獎勵：共享相同樣式表的組件怎么樣？如果遵循本地方法，兩者都應該匯入它嗎？
uj5u.com熱心網友回復：
一般來說，我建議在本地匯入它們，因為這將使您以后可以根據需要引入每頁代碼拆分，而我認為在應用程式根目錄中匯入它們沒有任何好處。
當您忘記匯入一張作業表時，這種方法還應該更容易發現，并且使您在添加組件時不必總是編輯額外的檔案（您的條目檔案）。
但是，我還建議您查看styled-components，這是一個用于將樣式與組件一起行內的庫。
uj5u.com熱心網友回復：
這是更多建筑型別的問題。用你的模塊匯入 CSS 很好。CSS-in-JS（你現在在做什么）與傳統 CSS 之間存在著爭論。
因此，樣式表是全域的
CSS 是全球性的。如果你想定義 CSS 的范圍，要么使用BEM之類的技術，要么使用完全不同的技術CSS 模塊，它們將為你的組件生成唯一的類名。
擁有一個中央 CSS 檔案（如index.css或styles.css）也非常好，您可以在其中匯入所有其他 CSS 檔案。然后你只在一個地方匯入這個中央 CSS 檔案，它會依次匯入其他樣式表。
這實際上是我的首選方法，但它有一些缺點 - 例如僅在組件加載時動態加載樣式表等。
uj5u.com熱心網友回復：
如果您有將應用于整個應用程式的全域樣式。將它放在 App.css 或全域級別。否則為每個組件創建一個檔案夾，如 Homepage -> 在其中創建 Homepage.jsx 和 Homepage.styles.scss ，它會更好。否則使用 styled-component 無需匯入
uj5u.com熱心網友回復：
我對樣式的建議如下：
- 避免在組件級別匯入 CSS 檔案，除非它們是模塊，見下文
- 在組件級別使用 CSS 模塊，并確保您不會更改這些 CSS 檔案中的某些全域樣式（例如
a或table樣式，甚至是與框架相關的樣式，例如，只是給您一個示例，.a-class-used-by-material-ui. 真的，永遠不要在組件上這樣做-等級！） - 如果你真的需要改變一個框架相關的樣式，并且沒有內置的方法可以做到這一點，只有在你沒有其他辦法的情況下，創建一個
styles目錄并添加一個檔案a-framework-name.css并在此處添加覆寫，只有當您完全了解后果（潛在的回應能力下降、與其他風格不一致、自以為是的變化等） - 將檔案放在您的
styles目錄中，例如index.css并將其匯入根index.js檔案以重置一些 CSS 默認值（以規范化） - 如果您決定使用 CSS-in-JS，請盡量避免將其與其他技術混合使用
- 共享樣式可以放在像這樣的模塊中
styles/shared.module.scss（考慮一下，如果你有一個共享樣式并且你開始在很多組件中使用相同的樣式，那么很難預測對樣式所做的更改的影響。假設你有height設定3rem然后你決定改變它3.5rem，你可能會在沒有意識到的情況下破壞一些東西） - 當然，以正確的方式匯入 CSS 模塊，例如
import style from "style.module.css"，這應該避免樣式名稱之間的名稱名稱沖突，因為如果配置正確，生成最終代碼時.fancyClassName將轉換為類的名稱style_fancyClassName__3xnbQ - 如果您想更好地控制 CSS 屬性值（例如“我的強調色必須是 #AC0955”），您應該考慮 CSS 變數
- 考慮 SCSS 或類似的解決方案，如果您可以在您的場景中利用它們
uj5u.com熱心網友回復：
這是我正在研究的專案結構
每個組件都有自己的 .css 檔案。此檔案中的樣式由與組件名稱對應的單獨類包裝。檔案 index.jsx 將匯入“./index.less”（通常是 index.css，但我的專案使用 lessjs）。該專案在 common/style/index.less 中還有一個中央 CSS 檔案，其中定義了常用的類（如：.font-size-12、.font-size-14、.color-primary、...）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416674.html
標籤：