React + Styled Components：如何编写带有嵌套标签的哑组件？答案

【问题标题】：React + Styled Components: How to write a dumb component with nested tags?React + Styled Components：如何编写带有嵌套标签的哑组件？
【发布时间】：2017-11-18 17:03:41
【问题描述】：

我正在尝试将我的部分标记提取到样式组件中。如果我的标记有嵌套标签，我该怎么做？

<p style={styles.disclaimer}>
  By pressing enter you agree to the &nbsp;
  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">
    terms of service
  </a>&nbsp;
  and &nbsp;
  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">
    privacy policy
  </a>
</p>

据我了解，styled-components 只是带有样式的原生 html 标签。但在这种情况下，我有一个 p 标签，里面有锚标签。

我将如何转换类似的东西：

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  border-radius: 12px;
  border: none;
`;

export default Button;

进入免责声明组件？

【问题讨论】：

哪一部分？更多细节会有所帮助。
更新问题

标签： reactjs styled-components

【解决方案1】：

你不能这样做吗：

const StyledP = styled.p`
  color: red;
`

<StyledP>
  By pressing enter you agree to the &nbsp;
  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">
    terms of service
  </a>&nbsp;
  and &nbsp;
  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">
    privacy policy
  </a>
</StyledP>

【讨论】：

那么它是一种反模式/不可能使用样式组件来制作一个<Disclaimer /> 组件并将文本填充到其中吗？
据我了解，这超出了styled-components 的目标。