Styled Components / React - Style on Fragment element

Question

I have a question with StyledComponents, it's possible to create a style using a React.Fragment or any other existing component?

I use this example (The intention is the Style ContainerFragment paints the background on blue and use all the styles)

Codepen

If it's not possible, exists another workaround? Explicit using Fragment as an example.

---

Update: I made a specific question with my real problem on this question

Answer 1

If you need to style a Fragment then you probably shouldn't be using it in the first place. Fragments exists as a workaround to return adjacent JSX elements, they don't render anything to the DOM so they can't be stylized.

This isn't correct:

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

A Fragment is not like a div. It won't get rendered to a regular html element

Answer 2

key is the only attribute that can be passed to Fragment. In the future, we may add support for additional attributes, such as event handlers.

Answer 3

If you want to style a component directly, you will need to specify a HTML element.

In your case though (if you are only using it to style lower-level components) you could use something like React Context to pass down a prop that the styled-component can consume and utilize to determine the style.

If you explicitly need the prop/value for styled-component usage, you could also use styled-components transient props.