问题标签 [theme-ui]

我已经使用包含组件的ThemeUI设置并发布到私人服务器的 StoryBook 设计系统。一个这样的组件是如下所示的按钮。

当我在一个单独的项目中将此组件导入我的 React 应用程序时，该组件会呈现，但 sx 道具中的所有属性都将被忽略......

所以按钮呈现但没有适用的边距（或我在 sx 道具中添加的任何其他样式。有谁知道为什么会这样？

有趣的是，如果我在 Storybook 中的其他地方调用该组件（而不是在导入单独的项目时）， sx 道具会按预期工作。

我正在使用 @theme-ui/prism 来格式化 markdown 文件中的代码块文本。我使用的降价插件是 gatsby-plugin-mdx。它似乎不起作用，因为我没有在代码块中得到深色背景。

这是我所做的：

创建 src/gatsby-plugin-theme-ui/components.ts：

在 src/gatsby-plugin-theme-ui/index.ts 我定义了一个样式pre：

• 我正在使用@smakosh的 GatsbyJS 主题和Theme UI插件；
• 我useColorMode从Hooks 中学会了使用Hooks -useThemeUI和useColorMode;
• 我的整个代码是完全正确的；
• 我已经清除了 GatsbyJS、npm 和浏览器的缓存，但同样的错误仍然存​​在；
• 你可以拿我的小包来分析：https ://drive.google.com/file/d/1SsgPXAq9zMv8Yp4XDjy3MJLeWun-J3UQ/view?usp=sharing 。

编译后，我收到两个错误：

• TypeError: setMode is not a function;
• InvalidCharacterError: String contains an invalid character：

检查我的整个代码：

我正在尝试Box在一个新项目上制作一个通用的反应组件。这将是所有其他组件的基础。我使用 styled-system、emotion 和最终的 theme-ui 来处理我所有组件的主题和样式。

我的根Box组件如下所示：

我正在使用样式函数以及样式系统中的相关类型来创建一个接受空间、颜色、布局、弹性框、边框和位置道具的 Box 组件。

我得到的错误只发生在color道具上。一旦我删除它，我就不会收到任何错误。

TS错误是：

这似乎只是从样式组件转移到情感时的一个问题，所以我不确定我是否缺少正确利用情感类型的东西？

我有这个 embed theme-ui 组件，它的高度不起作用。在控制台中显示正常，但显示为 100%；

嵌入在 100vw 的模态中，用于 100vh

谢谢

我需要声明这两个语句：

和

因为如果没有，主题-ui 错误会出现在 sx 道具中。

我试过这个：

但只适用于第一个对象（ThemeUIStyleObject）

我有一个基于 React TS 的设计系统，它使用情感、样式系统和主题 UI 构建，并且遇到了一个我似乎无法解决的 TS 错误。这似乎是一个简单的修复，我只是无法调试它......

我在packages/core/src/components/Divider/Divider.tsx第 22 行看到了这个问题。

错误是： Property 'colors' does not exist on type 'Theme'.

我正在尝试使用以下样式访问theme样式组件：

我提供了详细说明如何克隆、安装和启动项目的文档。或者您可以查看项目本身以快速了解设置。

Typescript 配置不是我的强项，所以如果有人能指出我正确的方向，我将不胜感激。谢谢！

有人可以解释Styled-components, Styled-system, emotion and theme-ui. 此外，这些库如何适应 MDX 环境？

注意：我已经阅读了所有文档，但无法找出差异

我们的主题对象有一个 zIndices 对象

升级到最新的 theme-ui (0.9) 后，我收到了很多这种类型的 TS 错误：

zIndices 必须是一个数组吗？我认为这曾经可以正常工作

已经使用 Chakra 有一段时间了，但我无法理解所有组件的样式，在这种情况下，FormControl在主题文件的全局级别上。

例如，如果我想为我的FormControl和FormLabel元素添加边距底部，我会将组件对象添加到主题文件中，如下所示：

但这对渲染的基本样式没有影响FormControlor FormLabel。

有人可以帮我解决我在这里做错的事情吗？