我們在使用樣式化組件時撰寫 css，但我不明白使用它的好處，為什么我們不使用我們撰寫的 css 作為組件的類名。在樣式化的組件中，我們有組件的包裝器，當我們使用純 CSS 時，我們有類名。用樣式化的組件包裝組件有什么好處
uj5u.com熱心網友回復：
在 React Web 開發中推送樣式組件的原因是僅將樣式封裝到這些組件中。沒有將 css 滲入其他組件的風險。與其學習新的 CSS 組織結構，新開發人員可以更快地加入。
話雖如此，它是限制性的，開發速度較慢，并且通過應用您可以共享的相同樣式增加了一些頁面重量。
我發現最快的作業方式是使用純 css 創建靜態 html 網頁，并以將其匯入框架的方式組織它。然后，您可以擁有可以獨立于編譯器進行測驗的樣板 html 設計，這在 Internet Explorer、Firefox、chrome、移動設備和所有不同的螢屏尺寸中進行測驗的速度要快得多。
如果您想使用樣式組件，您可以使用這個 npm 插件將您的靜態 css 轉換為變數以與樣式組件一起使用 - https://www.npmjs.com/package/@inspiraller/create-css-vars
或者不要。Nextjs 不支持 css 匯入，除非它是全域的，因此 webpack 編譯選項是一個更通用的解決方案。
uj5u.com熱心網友回復：
使用樣式化的組件，您可以添加邏輯編程
uj5u.com熱心網友回復：
樣式化組件的主要優點列在其網站的動機頁面中。
styled-components 是我們想知道如何增強 CSS 以設定 React 組件系統樣式的結果。通過專注于單個用例，我們設法優化了開發人員的體驗以及最終用戶的輸出。
除了為開發人員改進的體驗之外，styled-components 還提供：
- 自動關鍵 CSS：styled-components 跟蹤頁面上呈現的組件并注入它們的樣式而不是其他任何東西，完全自動。結合代碼拆分，這意味著您的用戶加載所需的代碼量最少。
- 沒有類名錯誤：styled-components 為您的樣式生成唯一的類名。您永遠不必擔心重復、重疊或拼寫錯誤。
- 更容易洗掉 CSS：很難知道代碼庫中的某個地方是否使用了類名。styled-components 很明顯，因為每一點樣式都與特定組件相關聯。如果組件未使用（工具可以檢測到）并被洗掉，則其所有樣式都會隨之洗掉。
- 簡單的動態樣式：根據組件的 props 或全域主題調整組件的樣式簡單直觀，無需手動管理數十個類。
- 無痛維護：您無需在不同的檔案中尋找影響組件的樣式，因此無論您的代碼庫有多大，維護都是小菜一碟。
- 自動供應商前綴：將您的 CSS 寫入當前標準，并讓樣式組件處理其余部分。
使用樣式化組件可以使用 JavaScript 代碼“增強” CSS 類，因為它們是用 JS 撰寫的。
const Input = styled.input`
color: ${props => props.hasError ? 'red' : 'black'};
`;
反對撰寫 2 個單獨的 CSS 類并控制用 JS 顯示的內容。
.text {
color: black;
}
.text--danger {
color: red;
}
<input className={`text ${hasError ? 'text--danger' : ''}`} />
從長遠來看，它可以生成更多可維護的代碼，但是是否更好地使用它是個人意見的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449285.html