如何使 Styled 组件通用以接收参数？答案

【问题标题】：How to make Styled components generic to receive parameters?如何使 Styled 组件通用以接收参数？
【发布时间】：2021-12-08 23:16:54
【问题描述】：

我正在尝试将样式化组件与 React FC 一起使用。我想在 div 容器中显示一些细节，它们都具有相同的样式。我可以用更通用的方式将文本作为参数传递，而不是在 h 标记中编写硬编码，例如名称：高度：重量：等？

这是我实施的方式，但我认为应该有更好的方式来做到这一点。就像给 Styled 组件一个参数一样。

const CardContentContainer= styled.div`
  margin: 4px;
  padding: 4px;
  text-align: left;
  font-size: 14px;
`;

const CardContentDetails = styled.h3`
  font-weight: normal;
  color: #fff;
  margin: 8px;
  white-space: nowrap;
`;

这是返回内部的代码：

return (

 <CardContentContainer>
    <CardContentDetails>
      Name: {ItemDetails?.name}
    </CardContentDetails>
    <CardContentDetails>
      Height:{ItemDetails?.height}
    </CardContentDetails>
    <CardContentDetails>
      Weight:{ItemDetails?.weight}
    </CardContentDetails>
  </CardContentContainer>
);

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

您不能将此类 props 传递给 Styled 组件，因为 SC 的主要目的是为该组件应用自定义样式。为了让它接收一些自定义的道具，你必须像这样将它包装在另一个组件中......


const StyledTextField = styled(TextField)`
  margin-bottom: 1rem;
  width: 20em;
`;

const Comp: React.FC<{ title: string }> = ({ title }) => (
  <StyledTextField>{title}</StyledTextField>
);

return (
  <Comp titile="some title" />

【讨论】：

是的，我使用 Typescript。我的观点是，如何在 h3 标签中发送参数而不是硬编码。例如：像这样的
在这种情况下，您必须使其成为一个反应功能组件
我正在使用函数组件。
对我的帖子@Waiz 进行了编辑
谢谢。这更接近我的需要。所以基本上我需要为此创建一个单独的组件。