问题标签 [styled-system]

我可以使用styled-system来实现这样的事情吗？

或者这个（因为我知道它也可以通过其他“样式道具”来完成，例如width，但我更喜欢使用带键的对象）：

我认为上面的代码示例是自描述的，它们遵循库的模式，但为了清楚起见，我将值（图像源）映射到断点（默认和下一个）。

例如，这是开箱即用的：

输出是这样的：

我一直在研究源代码，这里的这一部分让我认为它也应该与backgroundImage一起使用：

遗憾的是，它不起作用，结果是 CSS 输出中的字符串化对象（或串联的数组值）。

正如人们所建议的那样，我想不出这个variant功能在这里会有什么用处。我尝试使用该system功能，但我无法理解文档。这种ResponsiveValue类型给了我一个提示，但当我试图理解内部结构时，我感觉就像在黑暗中爬行。

最终，我想将“断点对象”（或数组）与我喜欢的任何自定义道具一起使用，如下所示：

注意：我（根据经验）了解到，您可以只使用“断点数组”版本（无需在主题中设置断点并将其传递给提供程序），并将值映射到前 2 个默认断点（不确定它们来自哪里）但是如果你想使用一个带有键的对象，你需要使用ThemeProvider带有你自己断点的主题对象。

注2：到目前为止，我可以理解样式系统文档：https ://styled-system.com/custom-props 。当我到达这里时，我觉得这就是我正在寻找的东西，但我无法理解这个例子，这个解释让我更加困惑，我在网上找不到任何例子。

注意 3：Spectrum Chat 有一个风格化系统频道，图书馆作者在那里，但遗憾的是我无法在那里发送任何消息（不断的网络错误）

例子

我正在尝试Box在一个新项目上制作一个通用的反应组件。这将是所有其他组件的基础。我使用 styled-system、emotion 和最终的 theme-ui 来处理我所有组件的主题和样式。

我的根Box组件如下所示：

我正在使用样式函数以及样式系统中的相关类型来创建一个接受空间、颜色、布局、弹性框、边框和位置道具的 Box 组件。

我得到的错误只发生在color道具上。一旦我删除它，我就不会收到任何错误。

TS错误是：

这似乎只是从样式组件转移到情感时的一个问题，所以我不确定我是否缺少正确利用情感类型的东西？

我正在尝试在我的 react native app 中使用样式系统库。我想在我的盒子组件中使用响应式样式，但出现错误“不支持作为内联样式的 atrule 类型的节点”。我该如何解决这个警告？

//主题

// 零件

我试图弄清楚如何在默认情况下解析组件中的样式系统函数。这个想法是有一个容器元素，它使用开箱即用的主题来提供主要的响应中断。

现在我在下面做的是为 styled-systemwidth函数提供一个像这样的对象：

这确实有效，但是，它不像我想要的那样干净。我希望能够简单地拥有

这会更干净，因为我可以将布局组件合并并导出到一个文件中，而无需执行const Container...+const StyledContainer...手续。

我正在考虑编写一个循环containers对象并返回包含在媒体查询中的宽度的函数的想法，但我想知道 styled-system 是否开箱即用？

我有一个styled-component正在使用的styled-system并且运行良好，但是当我去测试组件时，我似乎无法让它从主题中正确填充样式。

这很奇怪，因为如果我应用marginLeft={1}这种风格的道具会从Theme.space属性中正确翻译。这是color系统的具体问题吗？

文本组件

测试

通常我会测试color="primary"which is#3592fb但我只是得到一个错误，指出这primary不是 style-property 的有效值，color它告诉我ThemeProvider无法正常工作。

对此的任何帮助将不胜感激！谢谢

（或根据库类似命名）

这些功能纯粹是为了便于在应用程序中访问主题，还是提供一些功能/性能优势？

通过将主题导入组件直接访问主题或通过 ThemeProvider 访问主题有什么区别？

今天我开始了一个带有 expo 的项目，我想使用 styled-system。我使用 Styled-system 创建并使用了一个自定义组件。虽然它在移动设备上看起来不错，但风格并没有出现在世博会网站上。这是什么原因？

为了展示我编写的代码作为示例，我编写了文本组件和主屏幕，如下所示。

这就是它在 iOS 和 Web 上的外观。

最近，每次我尝试使用样式系统中的 css 函数时都会出错。它以前工作得很好，没有任何错误。不，我不断收到错误：

类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction”.ts(2769)

这是发生错误的代码片段：

错误信息的其余部分：

没有重载匹配此调用。Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction, ...rest: Interpolation[]): StyledComponent<...>'，给出了以下错误。“CssFunctionReturnType”类型的参数不能分配给“插值”类型的参数。类型“CssFunctionReturnType”不可分配给类型“InterpolationFunction”。类型“CSSObject”不可分配给类型“插值”。类型“CSSObject”不可分配给类型“字符串”。Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction, ...rest: Interpolation[]): StyledComponent<...>'，给出了以下错误。“CssFunctionReturnType”类型的参数不能分配给“插值”类型的参数。类型 '

我正在使用打字稿版本：^4.0.3

在我的 React 项目中，我将Emotion和Styled System用于我的设计系统和样式。

在theme.js我有一些值（创建响应式 CSS 网格）：

如何从我的 theme.js 访问这些键，以便我可以像这样使用它们：

我已经使用了 Emotion 的 ThemeProvider：

这如何与 Styled System 库一起使用，这里的最佳实践是什么？

目前我正在手动添加图标，但是对于几个图标来说，这种方式没有问题。但是如果有 100 个图标，它就变成了一个真正的问题。我怎样才能使它可重复使用。所以我可以应用这个元素，让它成为我想要的任何图标。最后它应该看起来像这样。