问题标签 [styled-system]

我无法让我的尺寸做出响应。我将数组传递给样式组件，它应该针对不同的布局进行更改。布局已正确更改，当我将屏幕尺寸从宽更改为移动时，断点会正确显示。此设置中有 4 种尺寸。

但这就是我在检查开发工具时看到的。尺寸保持 100 像素，但有 4 个不同的，每个屏幕尺寸。这里发生了什么？

MobileExample 样式的组件看起来是这样的：

DefaultTheme 看起来是这样的：

所以，首先，我这样声明我的组件：

然后我就用它：

最终，道具工作正常，但 vscode intellisense 根本看不到它。有什么解决方案可以解决它吗？

我正在尝试向数字数组添加一些别名，但打字稿不会接受它，这是代码：

编译器错误：

我正在 Vue3 中创建一个设计系统，并且一直在使用@emotion/css（与框架无关的）动态样式组件。但是，我真的很喜欢如果我们导入属性（或样式函数？），它styled-system会自动添加诸如color和之类的道具，如本例所示。我尝试将这种样式功能导入到我的项目中，但它并没有像我希望的那样工作。我想知道这些样式功能是否只能与组件一起使用？还是有另一种方法可以将 props 注入组件而无需声明所有组件？我对想法持开放态度，但理想情况下，我想远离 vue-styled-components 和 vue-emotion，因为它们不像bgcolorstyled@emotion/css和styled-system。我创建了一个简单示例，说明我计划在此代码沙箱中创建设计系统的方式。

所以我在使用 Typescript + Styled-Components + Styled-System 时得到了著名的“没有重载匹配这个调用”错误。

到目前为止，我发现的解决方案要求我将泛型传递type/interface给样式化组件。我用ButtonProps. 那么我做错了什么？

这是我的代码：

样式系统类型导入

类型声明

样式化组件定义

样式化组件的用法和错误发生的位置( <Button {...props}>)

报错信息截图

我已经使用 theme.js 文件利用情感和样式系统对我的网站进行了样式设置，并希望在前端显示值（例如 #141414）与令牌名称（例如 bgPrimary）。

显然，当我在实践中使用令牌时，我的网站背景是正确的值，但我也想在前端展示令牌名称和值（出于文档目的）。

我经常使用它的一个例子是这样的：

background-color: ${props => props.theme.colors.bgPrimary)

但是，如果我想在 Text 组件的前端显示 bgPrimary 的值，如下所示：

<Text value={___} />

我如何在不实际硬编码 HEX 值的情况下返回值 #141414？

以下是主题文件中颜色对象当前的外观：

如您所见，我有两种颜色模式，并且 bgPrimary 根据您设置的模式而有所不同。这就是为什么从主题中提取价值而不是硬编码很重要的原因。