CODEWITHSUNDEEP
javascriptcssreactjs
johannchopin
johannchopin

Reputation: 14844

Add styles to React.Fragment

Im working with React and my components follows this files structure schema:

- componentName
  |- componentName.tsx
  |- componentName.scss

There are some of these components that are wrap with a <React.Fragment> like that:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Is there a way to select this element in css ? Something like:

React.Fragment {
  padding-top: 30px;
}

Because it's not possible to add an id or a className to it. Any idea ?

Upvotes: 3

Views: 6895

Answers (1)

Tony M
Tony M

Reputation: 741

As others have pointed out in comments, React.Fragment does not add any extra nodes to the DOM. But in your case, it seems like you need to add a parent node. You can either add padding to ChildA or replace React.Fragment with a div. With the latter, I'd be mindful of any styling that expects 3 elements (with React.Fragment) and instead receives one element (div).

Upvotes: 6

Related Questions