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

时间:2019-08-14 17:33:18

标签: reactjs styles styled-components

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

我使用此示例(目的是样式ContainerFragment将背景绘制为蓝色,并使用所有样式)

Codepen

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


更新:我对此question

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

2 个答案:

答案 0 :(得分: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元素

答案 1 :(得分:1)

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