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

Question

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

<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;

进入免责声明部分？

Answer 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>

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

React + Styled Components: How to write a dumb component with nested tags?

reactjs

styled-components