Styled components: nested className selectors vs multiple styled components - reactjs

Question

In general, are there any significant performance differences between using one of these approaches over the other?
When using styled components I've noticed two common approaches:
Have a styled parent component that uses className selectors to target child nodes for styling, and encapsulates those styles in the one place.
Have multiple styled components for each individual node that requires styling, independent of any parent styled components.
1 - nested selectors
const MyComponent = styled.div`
display: inline-block;
position: relative;
.MyChildComponent {
position: absolute;
background: red;
}
.MySubComponent {
background: yellow;
}
`
// In use
<MyComponent>
<span className="MyChildComponent>A goose!</span>
<button className="MySubComponent">Click bait</button>
</MyComponent>
2 - discrete components
const MyComponent = styled.div`
display: inline-block;
position: relative;
`
const MyChildComponent = styled.span`
position: absolute;
background: red;
`
const MySubComponent = styled.button`
background: yellow;
`
// In use
<MyComponent>
<MyChildComponent>A Goose!<MyChildComponent>
<MySubComponent>Click bait</MySubComponent>
<MyComponent>
Obviously there are situational reasons to mix and match these approaches, and I'm not taking into consideration use cases where a component may be re-used throughout a code base. I'm instead asking in the context of large chunks of markup that are unlikely to change or be shared.