Styled Components / React - Fragment 元素上的样式

Posted 2023-02-22

【中文标题】Styled Components / React - Fragment 元素上的样式

【英文标题】：Styled Components / React - Style on Fragment element

【发布时间】：2019-12-21 07:03:17

【问题描述】：

我对 StyledComponents 有疑问，是否可以使用 React.Fragment 或任何其他现有组件创建样式？

我使用这个例子（意图是Style ContainerFragment将背景绘制成蓝色并使用所有样式）

Codepen

如果不可能，是否存在另一种解决方法？显式以 Fragment 为例。

---

更新：我对这个question提出了一个具体问题。

【问题讨论】：

您可以根据需要创建片段并发送颜色等道具。 (reactjs.org/docs/fragments.html)

【参考方案1】：

如果您需要设置Fragment 的样式，那么您可能一开始就不应该使用它。 Fragments 存在作为返回相邻 JSX 元素的解决方法，它们不会向 DOM 呈现任何内容，因此它们不能被风格化。

这是不正确的：

const ContainerFragment = styled(React.Fragment)`
  border: 1px solid red;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background: blue; 
`

片段不像div。它不会被渲染到常规的 html 元素

【讨论】：

那么我可能需要重新提出问题。

我只是用我的具体场景创建另一个问题***.com/questions/57499833/…

【参考方案2】：

key 是唯一可以传递给Fragment 的属性。 将来，我们可能会添加对其他属性的支持，例如事件处理程序。