样式化的组件/ React-片段元素上的样式

Question

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

我使用此示例（目的是样式ContainerFragment将背景绘制为蓝色，并使用所有样式）

Codepen

如果不可能，是否存在另一个解决方法？明确使用Fragment为例。

---

更新：我对此question

提出了一个具体问题，但遇到了实际问题

Answer 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元素

Answer 2

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