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>

据我了解，样式组件只是带有样式的原生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>