styled-components TSX：如何生成带瞬态属性的Prop接口版本

问题背景 #

你遇到的警告源于styled.div作为原生DOM元素的包装，会把所有传入的props透传给真实<div>节点，但React不识别aA这类自定义属性。手动复制接口加瞬态前缀的方法会带来重复维护的负担，下面是几种更优的解决方案：

方案1：用TypeScript映射类型自动生成带瞬态前缀的接口 #

利用TypeScript的映射类型，直接基于原Props生成带$前缀的瞬态属性接口，无需手动维护两个重复接口：

// Comp.tsx
interface Props {
  aA: boolean;
  bB: string;
  cC: '1' | '2';
}

// 自动生成带$前缀的DivProps，原Props更新时自动同步
type DivProps = { [K in keyof Props as `$${K}`]: Props[K] };

const StyledDiv = styled.div<DivProps>`
  background: ${({ $aA }) => $aA ? 'black' : 'white'};
  // ...其他样式
`;

const Comp = ({ aA, bB, cC }: Props) => {
  if (aA) {
    // do something
  } else {
    // do something else
  }

  // 传递时给属性加$前缀
  return <StyledDiv $aA={aA} $bB={bB} $cC={cC}>{/*...*/}</StyledDiv>;
};

这种方式下，只要修改Props接口，DivProps会自动同步更新，完全避免重复维护的问题。

方案2：使用shouldForwardProp过滤不需要传递的属性 #

如果你不想加$前缀，可以通过styled-components的shouldForwardProp配置，指定哪些属性不传递给真实DOM元素：

// Comp.tsx
interface Props {
  aA: boolean;
  bB: string;
  cC: '1' | '2';
}

// 配置shouldForwardProp，返回false的属性不会传给DOM
const excludedProps = new Set<keyof Props>(['aA', 'bB', 'cC']);
const StyledDiv = styled.div.withConfig({
  shouldForwardProp: (prop) => !excludedProps.has(prop as keyof Props),
})<Props>`
  background: ${({ aA }) => aA ? 'black' : 'white'};
  // ...其他样式
`;

const Comp = ({ aA, bB, cC }: Props) => {
  if (aA) {
    // do something
  } else {
    // do something else
  }

  // 直接传递原props即可，不需要加前缀
  return <StyledDiv aA={aA} bB={bB} cC={cC}>{/*...*/}</StyledDiv>;
};

这种方案适合不想修改属性命名的场景，结合Set和keyof可以自动同步Props的属性列表，减少手动维护成本。

方案3：解构分离组件逻辑与样式使用的props #

在组件内部把需要用于样式的props单独解构，结合瞬态属性传递，避免冗余属性透传：

// Comp.tsx
interface Props {
  aA: boolean;
  bB: string;
  cC: '1' | '2';
}

// 用Pick从Props中选择样式需要的属性，自动同步Props的类型
const StyledDiv = styled.div<{ [K in keyof Props as `$${K}`]: Props[K] }>`
  background: ${({ $aA }) => $aA ? 'black' : 'white'};
  // ...其他样式
`;

const Comp = ({ aA, bB, cC }: Props) => {
  if (aA) {
    // do something
  } else {
    // do something else
  }

  return <StyledDiv $aA={aA} $bB={bB} $cC={cC}>{/*...*/}</StyledDiv>;
};

这种方式直接在styled.div的泛型中使用映射类型，连额外定义DivProps的步骤都省了，进一步简化代码。

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