问题标签 [rebass]

初学者在这里。截至目前，我可以Box像这样使用：

并给它某些指定的道具，就像它在网站上所说的那样：

问题：如果我需要更多道具怎么办？

我知道我可以扩展 rebass components，但是，这似乎将某些 CSS 属性硬编码到组件中。例如，如果我的盒子总是紫色的，我可以PurpleBox在那里创建并保存颜色。或者在他们的网站上有这个例子：

很公平！我需要什么来创建一个组件，比如说，PositionedBox它可以获得一个额外的相对或绝对定位的position道具？

我想像这样使用它：

这可能吗？不知道我怎么能做到这一点。

我想在样式化组件中使用样式化系统的断点和大小调整机制。

目前，我必须使用'react-media'，它解决了我的问题，但是这个解决方案带有大量的代码重复。这是我当前根据屏幕尺寸设置 StyledComponent 的边框半径的解决方案：

是否可以获取当前断点索引？我可以写这样的东西：

我正在尝试在 Rebass 中使用主题，它建议使用 Theme UI 进行主题化。遵循以下指南后，我无法开始setColorMode编写我的故事书。

1. 进口useColorMode

我收到此错误消息：[useColorMode] 需要 ThemeProvider 组件

2. 进口useThemeUI

后来，我有setColorMode 不是一个函数

context使用 进行检查console.log，它包含以下内容：

useColorMode无处可寻。

我究竟做错了什么？

我当前的代码：

.storybook/config.js

我选择Rebass作为我的应用程序的组件库。因为 Rebass 对主题没有意见，所以它需要一个主题库。好吧，我选择了Theme UI来定义我的主题，然后我开始构建我的应用程序。

我很快注意到所有 React 组件（Box、Flex、Card、Link 等）在 Rebass 和 Theme UI 中都可用。浏览这两个文档时，很难分辨出差异。

如果我完全移除 Rebass，我会错过什么？这个图书馆的目的是什么？

在反应中使用 Rebass/Forms，我无法正确使用样式正确调整 Switch 组件的大小。（我也在用@emotion/styled）

我试过使用一个size属性，但这并没有给出简单改变开关比例的预期效果。

我尝试使用该sx属性并给它 awidth和 a height，但这只会调整按钮元素的大小，而不是“滑动点”的内部 div

我知道我可以编写一些针对内部 div 本身的样式，但我想找到一种方法来一次性给它一个高度和宽度，并且它适用于按钮和内部 div。

https://codesandbox.io/s/styling-rebass-switch-uu7wg

我有一个用 NextJS 构建的应用程序，我有一个由 Rebass 库组成的组件，它可以工作，但它在控制台中给出了这个警告：

这是组件：

和索引组件：

我怎样才能摆脱这个错误信息？

我有一个有 2 个孩子的 flexBox。1 个孩子只是一个图标，它似乎与另一个孩子的高度不同。请告诉我解决此问题的方法。

游乐场网址：网址

这是我的结果：

我希望第二个孩子和第一个孩子一样高。请指教。

（或根据库类似命名）

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

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

Text 组件的默认 HTML 元素是 div。我想将 Text 组件 HTML 元素更改为其他标签，例如 H1、H2、H3 和 P 以获取语义。如何将 rebass Text 组件 HTML 元素更改为其他标签以实现语义？

我正在尝试更改默认断点，但它不起作用。我遵循了文档并使用了ThemeProvider，但 Rebass 仍在使用默认断点。由于这个错误emotion-theming，我没有使用，而是使用：@emotion/react

我使用这些版本：

我的代码

_app.js

index.js

代码沙盒

我还创建了一个用于复制的沙箱：https ://codesandbox.io/s/rebass-themeprovider-wcc6b

期望

断点应该是768pxand1024px而不是40emand 52em。