创建具有多个元素的样式化组件答案

【问题标题】：Creating Styled component with multiple elements创建具有多个元素的样式化组件
【发布时间】：2021-02-25 07:05:32
【问题描述】：

我正在涉足Styled components，并试图创建一个包含多个html标签的“哑”组件。比如：

<div className="component-container">
  <a href="#some-link">Link text</a>
  <p className="para">Some Text</p>
</div>

有没有办法将 html 包装在一个单一样式的组件中？我阅读了文档，我只看到了这样的基于单个 html 元素的组件的示例：

const Container = styled.div`
  display: flex;
  justify-content: space-between;

  .para { 
    font-size: 15px;
   }
`;

我知道我能做到：

<Container>
  <a href="#some-link">Link text</a>
  <p className="para">Some Text</p>
</Container>

但这不是最优的。我宁愿创建一个普通的 React 功能组件，它可以将所有标记包装在一个组件中，我可以在任何地方导入并在一行中使用。

【问题讨论】：

假设您已经创建了这样的样式组件。但是随后将呈现该组件的children。在主div、a 或p 内。我不认为样式化组件是为组合元素而设计的。最好使用 react 组件。
你读了API，你做不到
对此我有点失望。这意味着我们经常不得不求助于普通的函数式组件，这意味着并非我们的所有代码都会获得样式化组件的好处，例如 css 范围和易于跨组件管理 css。所以我们仍然需要实现其他 css 范围技术。所以我猜对大型项目不是很有用。

标签： javascript reactjs styled-components

【解决方案1】：

您编写这样的代码的方式是让它成为您所说的功能组件。

const YourComponent = () => (
    <Container>
        <a href="#some-link">Link text</a>
        <p className="para">Some Text</p>
    </Container>
);

Styled-components 只是样式元素，但是 Container styled-component 当然可以复用。

【讨论】：