【问题标题】：Styled Components / React - Style on Fragment elementStyled Components / React - Fragment 元素上的样式
【发布时间】：2019-12-21 07:03:17
【问题描述】：
我对 StyledComponents 有疑问，是否可以使用 React.Fragment 或任何其他现有组件创建样式？
我使用这个例子（意图是Style ContainerFragment将背景绘制成蓝色并使用所有样式）
Codepen
如果不可能，是否存在另一种解决方法？显式以 Fragment 为例。
更新：我对这个question提出了一个具体问题。
【问题讨论】：
标签：
reactjs
styles
styled-components
【解决方案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 元素
【解决方案2】：
key 是唯一可以传递给Fragment 的属性。
将来，我们可能会添加对其他属性的支持，例如事件处理程序。