在样式组件中正确键入 (TS) 主题并使用对象语法

问题描述

所以我们目前正在将我们的 React 项目迁移到 Typescript。

我们使用 styled-components 和 styled-system 为我们的应用程序设计样式和主题。

样式系统要求您在样式组件上使用“对象语法”,以允许使用变体和其他样式系统特定主题选项。 styled-system variants

我遇到了两个问题,我似乎无法找到合适的解决方案:

  1. 我尝试输入我的主题,但在我的组件中使用主题道具时似乎无法获得正确的类型。我有点想避免在每个组件中都使用主题类型 - 这可能吗?
  2. 当我使用“普通”字符串模板语法时,TS 似乎对“主题”为“任意”感到满意,但是当与“对象语法”一起使用时,TS 会抛出错误,指出主题明确为“任意”

我创建了一个演示问题的最小代码和框:

https://codesandbox.io/s/boring-silence-3qxjn?file=/src/App.tsx

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)