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

- ponentName
  |- ponentName.tsx
  |- ponentName.scss

There are some of these ponents 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 ?

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

- ponentName
  |- ponentName.tsx
  |- ponentName.scss

There are some of these ponents 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 ?

• javascript
• css
• reactjs

Share Improve this question Follow asked Mar 5, 2020 at 22:13 johannchopinjohannchopin 14.9k1111 gold badges6363 silver badges121121 bronze badges 3

• 4 Fragments let you group a list of children without adding extra nodes to the DOM. So, there is no element in DOM, nothing to style. reactjs/docs/fragments.html – m1k1o Commented Mar 5, 2020 at 22:17
• 1 Fragment doesn't appear in the DOM. It's basically an escape hatch that allows you to return an array of ponents from a ponent, so no you can't style it because it technically doesnt exist. – JMadelaine Commented Mar 5, 2020 at 22:18
• 1 The point of a fragment is that it won't render anything. So no you would not be able to select it like that. If you need to do something like this why not just use a div? – Brian Thompson Commented Mar 5, 2020 at 22:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As others have pointed out in ments, 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).