为什么 sx 道具无法访问主题对象？答案

【问题标题】：Why is sx props unable to access theme object?为什么 sx 道具无法访问主题对象？
【发布时间】：2020-08-26 02:46:50
【问题描述】：

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

这是一个为复制而创建的 bug-repo。 https://github.com/mujeex/embsy-bug-repo

【问题讨论】：

你能指向 repo 中的特定文件吗？看起来像the current commit 的一个未改动的默认启动器。您能否也发布您使用 sx 道具的代码 sn-p 吗？
感谢您指出这一点，原来我忘记将最新更改提交给有问题的项目。它现在在那里；如果你可以检查组件文件夹中的 header.js 文件，你会发现 sx 道具使用情况
我在本地运行你的 repo，主题似乎已经完美设置。哪个特定方面导致您出现问题？例如，如果您想知道标题没有颜色 primary，那是因为您将 this rule 直接定位在将其变为白色的 a 元素上（查看 CSS specificity）。如果您检查元素，您可以看到主题值已被覆盖:)
哈哈我的上帝！我现在觉得很傻。完全错过了！非常感谢。现在可以使用了
将其添加为您的答案

【解决方案1】：

我已经在本地运行了 repo，并且能够在组件中使用主题值。

在这种情况下，Header 组件没有获得primary 颜色，因为color: white; 规则 (this line) 直接针对锚元素 :) 您可以通过检查浏览器开发工具中的元素。

如果您有兴趣了解为什么会发生这种情况，可以阅读CSS specificity。

【讨论】：