reactjs - 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 标签。但在这种情况下，我有 ap 标签，里面有锚标签。

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

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>