问题标签 [theme-ui]

使用gatsby-plugin-theme-ui构建 Gatsby 主题时，文档指出您可以通过将主体添加到嵌套颜色对象中的主题对象来调整主体的背景颜色。这似乎没有效果。其他变量（例如字体和样式）正确引入，但除了在单个元素上调整它之外，我似乎无法改变背景。有没有额外的步骤来让它工作？

使用setInitialMode和定义暗模式能够改变背景，但这似乎是一个 hacky 解决方案，因为我没有尝试构建主题颜色切换。

这是我在目录中的主题配置文件src/：

主题.js

目录中的index.jssrc/gatsby-plugin-theme-ui/：

不会创建错误消息。无论输入什么颜色（十六进制、rgba 或其他颜色），背景都将保持默认颜色。

我正在尝试在 Rebass 中使用主题，它建议使用 Theme UI 进行主题化。遵循以下指南后，我无法开始setColorMode编写我的故事书。

1. 进口useColorMode

我收到此错误消息：[useColorMode] 需要 ThemeProvider 组件

2. 进口useThemeUI

后来，我有setColorMode 不是一个函数

context使用 进行检查console.log，它包含以下内容：

useColorMode无处可寻。

我究竟做错了什么？

我当前的代码：

.storybook/config.js

Theme-UI有许多内置组件。但它们都是“简单”的组件。也就是说，没有选项卡、手风琴、可排序表或其他具有更“复杂”功能的组件。

我正在寻找其他组件库的建议，这些组件库具有该功能，但可以与 theme-ui 很好地同步。也就是我想用theme-ui的theme和sx prop，但是要具备另外一个组件库的功能。

有什么建议么？

谢谢。

我正在开发基于theme-ui-gatsby-plugin、 prism-react-renderer和react-live的 MDX 代码块组件。

考虑到呈现标签和组件呈现标签，重用相同语法突出显示主题react-live和组件的最佳方法是什么。react-prism-rendererreact-livepreprism-highlight<pre><code>

• 代码沙盒
• 语法高亮示例

相关： https ://github.com/system-ui/theme-ui/issues/212，https : //github.com/mdx-js/mdx/issues/702

我正在使用 gatsby-theme-blog，并且想使用“Wordpress 2016”主题附带的默认“Montserrat”以外的字体。

如果可能，我想将字体更改为“Work Sans”，“ fairyGate ”主题用于标题。

从盖茨比主题中的阴影中，我知道如何在我的项目下创建文件以替换原始文件。但是，所有方法都失败了，帖子页面中的标题仍然存在Montserrat。

这是我尝试过的：

1. 安装主题及其依赖字体：

2. 创建文件以隐藏原始排版：

任何建议表示赞赏！

我正在使用https://theme-ui.com/来设置我的组件的样式。就体验而言，一切都很棒，但我根本无法使渐变值起作用。我有一个按钮，它的边框应该改变。我定义了以下变体：

当我打开应用程序时，边框是灰色的，并且在我看到的开发工具中property-invalide-value或类似的东西。

如何在 theme-ui 配置文件中使用渐变值？

我选择Rebass作为我的应用程序的组件库。因为 Rebass 对主题没有意见，所以它需要一个主题库。好吧，我选择了Theme UI来定义我的主题，然后我开始构建我的应用程序。

我很快注意到所有 React 组件（Box、Flex、Card、Link 等）在 Rebass 和 Theme UI 中都可用。浏览这两个文档时，很难分辨出差异。

如果我完全移除 Rebass，我会错过什么？这个图书馆的目的是什么？

我正在用 Gatsby 试验各种字体加载策略，最终解决了gatsby-plugin-theme-uitheme.fonts的源代码，因此一旦客户端加载了所有字体（默认theme.fonts设置为系统字体），我就可以更新值。

在完成所有这些之后，我ColorModeProvider将其安装并添加wrap-root-element.js到ThemeProvider. 只有text&background颜色正在更新，但primary,secondary和muted颜色没有改变（使用默认颜色）。我可以确认每次更改主题时 CSS 变量都会更新。

请让我知道我在这里缺少什么？

• 演示（不应更改代码块颜色，因为它们由另一个提供商处理）
• 实际公关

主题提供者：

包装根元素.js：

颜色模式按钮：

我还就Spectrum和Github 问题提出了这个问题，以防其他人有兴趣检查这些线程。

我正在尝试将主题 UI 用于我正在从事的新 gatsby 项目。按照theme-ui 文档中的说明进行操作后，我仍然无法使主题化正常工作。sx 道具似乎无法访问在 /src/gatsby-theme-ui/index.js 创建的主题对象。提前致谢。

这是为复制而创建的错误存储库。 https://github.com/mujeex/embsy-bug-repo

我有一个使用 Theme UI 和 Netlify CMS 的 Gatsby 项目。

如何使用我的主题 UI 样式设置 Netlify CMS 预览窗格的样式？

Netlify CMS 不支持 CSS-in-JS 库：

https://github.com/netlify/netlify-cms/issues/793

与样式化组件不同，似乎也不可能说服 Emotion 将其样式注入 Netlify iframe。似乎确实支持将原始 CSS 注入预览 iframe：

https://github.com/netlify/netlify-cms/pull/1162

但到目前为止，我似乎无法弄清楚如何独自完成这些工作。