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

如何解决在样式组件中正确键入 (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