CSS 主题变量
Material UI 中采用 CSS 主题变量的概述。
CSS 变量 是一种现代的跨浏览器功能，可让您在 CSS 中声明变量并在其他属性中重用它们。您可以实现它们以改善 Material UI 的主题和自定义体验。
简介
CSS 主题变量取代 Material UI 组件中的原始值，从而提供更好的开发者体验，因为在浏览器开发者工具中，您将看到哪个主题令牌用作值。
除了这些变量之外，您还可以在构建时将主题注入到应用程序的样式表中，以便在整个应用程序呈现之前应用用户选择的设置。
优势
- 它使您可以防止 暗黑模式 SSR 闪烁。
- 您可以创建超出
light和dark的无限颜色方案。 - 它不仅为开发者，也为团队中的设计师提供了更好的调试体验。
- 您网站的配色方案在浏览器选项卡之间自动同步。
- 它简化了与第三方工具的集成，因为 CSS 主题变量是全局可用的。
- 当您想将暗黑样式应用于应用程序的特定部分时，它减少了对嵌套主题的需求。
权衡
对于服务器端应用程序，有一些权衡需要考虑
| 与默认方法比较 | 原因 | |
|---|---|---|
| HTML 大小 | 更大 | CSS 变量是在构建时为亮色模式和暗黑模式生成的。 |
| 首次内容绘制 (FCP) | 更长 | 由于 HTML 大小更大，因此在显示内容之前下载 HTML 的时间会稍长一些。 |
| 可交互时间 (TTI) | 更短（对于暗黑模式） | 样式表不会在亮色模式和暗黑模式之间重新生成，运行 JavaScript 代码的时间大大减少。 |