React + Styled組件：如何使用嵌套標籤編寫啞組件？

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>