如何让Styled Components支持泛型传参，实现React FC下通用样式组件复用

最推荐方案：封装通用详情项 + 配置化遍历 #

保留你原有styled组件不变，封装接收label（前缀固定文本）和value（对应展示值）的复用组件即可：

// 无TS环境直接删掉类型定义即可
interface DetailItemProps {
  label: string;
  value: string | number | undefined;
}

const DetailItem: React.FC<DetailItemProps> = ({ label, value }) => {
  //  ?? '-' 用于处理值为空的情况，可根据需求调整为空提示
  return <CardContentDetails>{label}: {value ?? '-'}</CardContentDetails>
};

接着把需要展示的字段统一配置为数组，后续新增/修改字段只要调整这个配置即可，不用修改渲染逻辑：

const detailFields = [
  { label: 'Name', key: 'name' },
  { label: 'Height', key: 'height' },
  { label: 'Weight', key: 'weight' },
]

最后渲染部分直接遍历配置数组即可，不需要重复写多个结构一致的标签：

return (
  <CardContentContainer>
    {detailFields.map(field => (
      <DetailItem 
        key={field.key} 
        label={field.label} 
        value={ItemDetails?.[field.key]} 
      />
    ))}
  </CardContentContainer>
);

备选方案：直接通过Styled Components props注入标签（不推荐） #

如果不想额外封装React组件，也可以通过Styled的props能力把前缀文本通过伪元素注入，但是该方案的前缀文本无法被用户选中复制、SEO友好度低，仅适合特殊场景使用：

// 给styled组件新增label入参
const CardContentDetails = styled.h3<{ label: string }>`
  font-weight: normal;
  color: #fff;
  margin: 8px;
  white-space: nowrap;
  &::before {
    content: '${props => props.label}: ';
  }
`;

// 调用时传入label参数即可
return (
  <CardContentContainer>
    <CardContentDetails label="Name">{ItemDetails?.name}</CardContentDetails>
    <CardContentDetails label="Height">{ItemDetails?.height}</CardContentDetails>
    <CardContentDetails label="Weight">{ItemDetails?.weight}</CardContentDetails>
  </CardContentContainer>
);

内容的提问来源于stack exchange，提问作者Waiz