如何在不转为过渡属性的前提下向styled组件传递props？

核心需求 #

你需要实现：

• 样式专用的Props（size/height/color）仅在styled组件内部使用，不传递到DOM元素
• 避免手动重复映射Props（比如手动把size转成$size）
• 在TypeScript环境下正常工作

方案1：使用shouldForwardProps配合TypeScript类型对齐 #

styled-components的withConfig方法可以配置shouldForwardProps，明确指定哪些Props不传递到DOM。同时通过类型继承确保styled组件的Props和外部组件一致，避免重复定义。

import React from 'react';
import styled from 'styled-components';

// 定义外部组件完整Props：样式Props + 原生p标签的HTML属性
type TextProps = {
  children: React.ReactNode;
  size: number;
  height: number;
  color: string;
} & React.HTMLAttributes<HTMLParagraphElement>;

// 配置styled组件，指定不转发到DOM的Props
const StyledText = styled.p.withConfig({
  shouldForwardProps: (props) => {
    // 排除样式专用的Props，其余原生属性正常转发
    return !['size', 'height', 'color'].includes(props as string);
  }
})<TextProps>`
  color: ${({ color }) => color};
  font-size: ${({ size }) => `${size}px`};
  line-height: ${({ height }) => `${height}px`};
  // 其他样式...
`;

// 外部组件直接透传所有Props，无需手动解构映射
const Text: React.FC<TextProps> = (props) => {
  return <StyledText {...props}>{props.children}</StyledText>;
};

为什么之前的shouldForwardProps不工作？

通常是因为styled组件的泛型类型和外部组件Props没有对齐，或者shouldForwardProps的参数类型未正确处理。使用withConfig并让styled组件继承外部的TextProps，可以解决TypeScript类型不兼容的问题。

方案2：利用$前缀自动过滤Props #

styled-components默认会自动过滤所有带$前缀的Props，不会传递到DOM。你可以通过批量映射工具函数，把外部的样式Props转成带前缀的内部Props，避免手动逐个映射：

import React from 'react';
import styled from 'styled-components';

type TextProps = {
  children: React.ReactNode;
  size: number;
  height: number;
  color: string;
} & React.HTMLAttributes<HTMLParagraphElement>;

// 内部styled组件接收带$前缀的样式Props
const StyledText = styled.p<{
  $size: number;
  $height: number;
  $color: string;
}>`
  color: ${({ $color }) => $color};
  font-size: ${({ $size }) => `${$size}px`};
  line-height: ${({ $height }) => `${$height}px`};
  // 其他样式...
`;

// 批量映射Props的工具函数，避免重复代码
const mapToStyledProps = ({ size, height, color, ...rest }: TextProps) => ({
  $size: size,
  $height: height,
  $color: color,
  ...rest
});

// 外部组件调用工具函数完成映射
const Text: React.FC<TextProps> = (props) => {
  return <StyledText {...mapToStyledProps(props)}>{props.children}</StyledText>;
};

这种方式不需要配置shouldForwardProps，依赖styled-components的默认行为，类型定义也更清晰。

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