为啥 css-in-js 系统需要 ThemeProvider/useTheme

Posted

技术标签:

【中文标题】为啥 css-in-js 系统需要 ThemeProvider/useTheme【英文标题】:Why do css-in-js systems need ThemeProvider/useTheme为什么 css-in-js 系统需要 ThemeProvider/useTheme 【发布时间】:2021-02-01 17:28:42 【问题描述】:

(或类似名称,取决于库)

这些功能纯粹是为了便于在应用中访问主题,还是提供一些功能/性能优势?

通过将主题导入组件直接访问主题或通过 ThemeProvider 访问主题有什么区别?

【问题讨论】:

【参考方案1】:

我认为任何性能缺陷或收益都可以忽略不计。然而,它们确实提供了易用性,因为更容易获得主题内联,例如color: $(theme) => theme.colors.primary,而无需每次都导入主题文件。还有一些帮助程序可以使访问不那么冗长。

另一个很大的好处是当您需要使用不同的主题或即时交换它们时。 ThemeProvider 将根据需要更新,您甚至可以使用嵌套在主 theme 中的不同主题变体。如果您正在使用暗模式等,这真的很有帮助。

【讨论】:

以上是关于为啥 css-in-js 系统需要 ThemeProvider/useTheme的主要内容,如果未能解决你的问题,请参考以下文章

在 Svelte 中使用 CSS-in-JS

CSS-in-JS 的库是如何工作的?

CSS-in-JS 的库是如何工作的?

为什么要和 CSS-in-JS 说拜拜

CSS-in-JS是恶魔还是天使?

如何使用 CSS-in-JS 方法设置 body 标签的样式?