我对StyledComponents有一个问题，是否可以使用React.Fragment或任何其他现有组件创建样式？我使用这个例子（意图是样式ContainerFragment将背景绘制为蓝色并使用所有样式）Codepen如果不可能，是否存在其他解决方法？以Fragment为例显式说明。
React.Fragment
ContainerFragment
更新：我针对这个question的真实的问题提出了一个具体的问题
fafcakar1#
如果你需要样式化一个Fragment，那么你可能一开始就不应该使用它。Fragments作为一种变通方法来返回相邻的JSX元素，它们不会向DOM呈现任何东西，所以它们不能被样式化。
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; `
字符串Fragment不像div，它不会向DOM呈现任何东西，这就是拥有它的全部意义。
div
jhkqcmku2#
key是唯一可以传递给Fragment的属性。将来，我们可能会添加对其他属性的支持，例如事件处理程序。
key
r1zhe5dt3#
如果你想直接设计一个组件的样式，你需要指定一个HTML元素。在你的例子中（如果你只是使用它来样式化较低级别的组件），你可以使用像React Context这样的东西来传递一个prop，样式化的组件可以使用它来确定样式。如果您显式地需要prop/value来使用样式化组件，您也可以使用样式化组件的 transient prop。
3条答案
按热度按时间fafcakar1#
如果你需要样式化一个
Fragment，那么你可能一开始就不应该使用它。Fragments作为一种变通方法来返回相邻的JSX元素，它们不会向DOM呈现任何东西，所以它们不能被样式化。**不正确：
字符串
Fragment不像
div，它不会向DOM呈现任何东西，这就是拥有它的全部意义。jhkqcmku2#
key是唯一可以传递给Fragment的属性。将来，我们可能会添加对其他属性的支持，例如事件处理程序。r1zhe5dt3#
如果你想直接设计一个组件的样式，你需要指定一个HTML元素。
在你的例子中（如果你只是使用它来样式化较低级别的组件），你可以使用像React Context这样的东西来传递一个prop，样式化的组件可以使用它来确定样式。
如果您显式地需要prop/value来使用样式化组件，您也可以使用样式化组件的 transient prop。