样式化组件-样式化嵌套元素时有什么更好的方法

Question

我需要在 TermsControl 中添加另一个div。 现在我的问题是我是否应该将div用作简单的div并设置其样式如下：

<TermsControl>
      <label>
        We would like to send you emails...
        <div>
          <input name='some-name' type='checkbox' />
          Yes, please send me emails.
        </div>
        By clicking Submit you confirm that you have read and agreed.
      </label>
    </TermsControl>;

样式

const TermsCheck = styled.div`
  display: flex;
  width: 400px;
  div {
    font-weight: 300;
  }
`;

或者我应该这样做：

<TermsControl>
  <label>
    We would like to send you emails...
    <ConsentDiv>
      <input name='some-name' type='checkbox' />
      Yes, please send me emails.
    </ConsentDiv>
    By clicking Submit you confirm that you have read and agreed.
  </label>
</TermsControl>;

样式

const TermsCheck = styled.div`
  display: flex;
  width: 400px;
`;

const ConsentDiv = styled.div`
  font-weight: 300;
`;