CSS 主題變數
Material UI 中採用 CSS 主題變數的概觀。
CSS 變數是一種現代化的跨瀏覽器功能，可讓您在 CSS 中宣告變數，並在其他屬性中重複使用。 您可以實作它們以改善 Material UI 的主題設定和客製化體驗。
簡介
CSS 主題變數取代 Material UI 組件中的原始值，以提供更好的開發者體驗，因為在瀏覽器開發者工具中，您將看到哪個主題 token 被用作值。
除了這些變數之外，您還可以在建置時將主題注入到應用程式的樣式表中，以便在整個應用程式呈現之前套用使用者選取的設定。
優點
- 它可以讓您防止深色模式 SSR 閃爍。
- 您可以創建超出淺色和深色的無限色彩配置。
- 它不僅為開發者，也為您團隊中的設計師提供了更好的除錯體驗。
- 您網站的色彩配置會在瀏覽器分頁之間自動同步。
- 它簡化了與第三方工具的整合，因為 CSS 主題變數是全域可用的。
- 當您想要將深色樣式套用到應用程式的特定部分時，它可以減少對巢狀主題的需求。
權衡
對於伺服器端應用程式，有一些權衡需要考慮
| 與預設方法比較 | 原因 | |
|---|---|---|
| HTML 大小 | 較大 | CSS 變數在建置時會為淺色和深色模式生成。 |
| 首次內容繪製 (FCP) | 較長 | 由於 HTML 大小較大，因此在顯示內容之前下載 HTML 的時間會稍微長一些。 |
| 可互動時間 (TTI) | 較短 (針對深色模式) | 樣式表不會在淺色和深色模式之間重新生成，因此花費在執行 JavaScript 程式碼上的時間會少很多。 |