问题标签 [styled-system]

我想指定我自己的自定义断点。https://styled-system.com/responsive-styles/#using-objects的文档仅指theme.js.

但我不明白我在哪里放置theme.js？或找到它？以及如何将其导入项目？以及如何使用别名定义断点并使用普通对象作为值。？

有人可以指导我吗？我styled-system在 Gatsby.js 中使用

我有一个基于 React TS 的设计系统，它使用情感、样式系统和主题 UI 构建，并且遇到了一个我似乎无法解决的 TS 错误。这似乎是一个简单的修复，我只是无法调试它......

我在packages/core/src/components/Divider/Divider.tsx第 22 行看到了这个问题。

错误是： Property 'colors' does not exist on type 'Theme'.

我正在尝试使用以下样式访问theme样式组件：

我提供了详细说明如何克隆、安装和启动项目的文档。或者您可以查看项目本身以快速了解设置。

Typescript 配置不是我的强项，所以如果有人能指出我正确的方向，我将不胜感激。谢谢！

我想在我的项目中使用样式系统，即管理面板。我基于 React Material 构建了项目，我有很多不同的表单，包括输入、选择、复选框等。在许多地方，我必须为元素设置一些边距/填充，并且我使用一些自定义 Box 组件来制作这一刻，该组件使用样式系统功能（空间、颜色等）。但最后我得到了一个相当麻烦的结构，如下所示：

它只是组件的一小部分。我认为，在这种情况下，最好围绕 TextField/Select 组件创建一些包装器，以便为组件添加样式系统功能。然后像这样使用它们：

但是后来我明白了 react-material 有很多组件，我必须做什么？覆盖所有这些以获得一些相似的风格？或者有什么方法可以更舒服？

我试图找出从StyledComponent

例如，我有一个使用 InputBase 组件的组件，我想提取样式组件的所有类型 + 我的自定义道具。

例如，我有一个样式组件

现在我希望类型是输入道具（onChange ete 等）和 BoxProps。

像这样，但是在这个例子中我得到了太多不兼容的错误，可能是因为 BoxProps 和 InputElement Props。有什么好的方法可以提取输入的类型并将其与

我目前正在使用带有样式系统插件和文档的情感，有一些 Box 组件的示例，我们可以使用它来创建布局的一些块，例如：

在其他一些示例中，我还看到了 Text 组件，它接受诸如 fontSize、fontFamily 等道具。

如果我们可以使用 Box 达到相同的结果，那么创建 Text 组件的目的是什么？而且它会更短：

也许是因为一些表演时刻？

如何使用样式系统和样式组件创建通用标题组件？

以下有效，但我所有的标题都使用 h1 标签。

我试图创建一个 HeadingBase 组件，如：

但我收到一个错误，<Component {...props} />因为它没有用于 TextAlignProps 和 ColorProps 的 API。

有人可以解释Styled-components, Styled-system, emotion and theme-ui. 此外，这些库如何适应 MDX 环境？

注意：我已经阅读了所有文档，但无法找出差异

我现在正在使用 styled-system 和 Emotion，但我无法理解哪种方法更适合使用。我有一些“盒子”组件，它处理来自https://styled-system.com/api/
的不同道具，如 mx、my、px、py、bg、color 和许多其他道具。

有时我有以下情况：
我有一些“选择”组件，它没有样式系统道具。而且我必须为此 Select 添加一些边距（例如）。我可以通过以下方式做到这一点：

或者我可以将 Emotion 的 css 道具与@styled-system/css一起使用，然后执行以下操作：

就我个人而言，css 选项似乎更具可读性，但我已经在项目的许多地方使用了“Box”组件，我不知道是否要更改它们的语法。

前 ：

后 ：

在哪种情况下哪个选项更正确？

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

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

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

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

1. 我尝试输入主题，但在组件中使用主题道具时似乎无法返回正确的类型。我有点想避免在每个组件中都使用主题类型——这可能吗？
2. 当我使用“普通”字符串模板语法时，TS 似乎对“theme”为“any”感到满意，但当与“object-syntax”一起使用时，TS 会抛出错误，称主题明确为“any”

我创建了一个最小的代码框来演示这个问题：

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

现在我不完全确定是什么因素导致了这个问题，但让我们从我的最小复制开始

我想做什么

我想展示一个样式元素，它由模式内的各种“继承”成员组成。单击元素后，它将关闭模式。

实际结果

onClick出于某种原因，一旦您单击实际应该打开模式的按钮，该元素就会提前触发。这只是因为它是一个样式化的组件（我认为）。如果我将元素从 a 更改Para为 normal p，则它的行为正确。

我想知道，这是什么原因造成的？是不是我嵌套太多了？我得到的错误是