样式化的组件：嵌套的className选择器与多个样式化的组件

Question

通常，使用其中一种方法与使用另一种方法之间是否存在明显的性能差异？

在使用样式化组件时，我注意到了两种常见方法：

1. 具有样式化的 parent 组件，该组件使用className选择器将子节点作为样式目标，并将这些样式封装在一个位置。
2. 每个需要样式的节点都有多个样式化组件，而与任何父样式化组件无关。

1-嵌套选择器

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-分立组件

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>

很显然，在某些情况下存在混合和匹配这些方法的情况，并且我没有考虑使用案例，在这些案例中，可能会在整个代码库中重复使用组件。相反，我是在无法修改或共享的大块标记的情况下询问。