对主题对象的引用在主题 UI 主题中不起作用

Question

TLDR

我的主题 UI 主题中的引用被输出为静态值，而不是解析为对象属性/值，这意味着我得到 CSS 输出，例如

font-family: heading;

，其中 font-family 实际上应该映射到

text.heading

并解析为类似的内容

font-family: Lato, sans-serif

。

无论我是从主题内部引用主题值还是从组件引用主题值（使用类似

variant='text.h1'

的内容），问题都是一样的。同样，诸如

colors.primary

之类的颜色参考也不会解析。似乎我在配置中做了一些根本性错误，但我已经卸载并重新遵循安装步骤，并且得到了相同的结果。

如何使主题引用正确解析？

详情

我已经使用每个库的入门文档安装了 Rebass 和主题 UI。

package.json

的相关内容：

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@mdx-js/react": "^2.2.1",
    "@theme-ui/mdx": "^0.15.4",
    "gatsby": "^5.3.3",
    "gatsby-plugin-image": "^3.3.2",
    "gatsby-plugin-mdx": "^5.3.1",
    "gatsby-plugin-sass": "^6.3.1",
    "gatsby-plugin-sharp": "^5.3.2",
    "gatsby-plugin-theme-ui": "^0.15.4",
    "gatsby-source-filesystem": "^5.3.1",
    "gatsby-transformer-sharp": "^5.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rebass": "^4.0.7",
    "sass": "^1.57.1",
    "theme-ui": "^0.15.4",
  }

我已经按照文档以基本形式创建了我的主题：

const theme = {
  colors: {
    text: '#202020',
    background: '#f2f7f8',
    primary: '#095463',
    secondary: '#ff0000',
    black: '#202020',
    white: '#fefefe',
  },
  fonts: {
    body: 'Lato, sans-serif',
    heading: 'Lato, sans-serif',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700
  },
  text: {
    heading: {
      color: 'secondary',
      fontFamily: 'heading',
      fontWeight: 'heading',
    },
    h3: {
      color: 'secondary',
      fontFamily: 'heading',
      fontWeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      color: 'primary'
    },
    h1: {
      variant: 'text.heading',
      fontSize: 5,
    },
    h3: {
      variant: 'text.h3',
      fontSize: 5,
    },
  },
}

export default theme

根样式正确应用于

html

元素（例如，字体和颜色作为 CSS 变量，例如

--theme-ui-colors-primary: #095463;

，但主题中的任何引用都不起作用，并且在组件上用作变体或作为组件时也不起作用）

sx

道具。

如果我检查标题，CSS 属性会显示静态值（例如“标题”），而不是对主题对象的引用：

Answer 1

当我从

emotion-theming

更新到

@emotion/react

后，我遇到了这个问题，我发现了这里导致的问题 ThemeProvider 无法与 Rebass 一起使用。

“emotion-theming”中的 ThemeProvider 和 Rebass 使用 @emotion/core 中的相同 ThemeContext，但“@emotion/react”中的 ThemeProvider 使用 @emotion/react 的 ThemeContext，而 Rebass 仍然使用 @emotion/core 的 ThemeContext，@iChenLei建议使用情感主题或推送 Rebass 库作者来支持@emotion/react（但这看起来不可能，因为 Rebass 目前不是一个活跃的项目）。