如果您使用的是div或span等内置组件，并且希望允许用户通过一些 prop 自定义样式。

const MyComponent = styled('div')(({ bgColor }) => ({
  backgroundColor: bgColor,
}));

当你这样使用它时：

<MyComponent bgColor='red'>

prop作为attribute传递给DOM树中的真实的元素：

React会抱怨，比如：

Warning: React does not recognize the `bgColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bgcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

这就是shouldForwardProp存在的原因，以防止样式 prop 被传递并创建无效属性：

const MyComponent = styled('div', {
  shouldForwardProp: (props) => props !== 'bgColor',
})(({ bgColor }) => ({
  backgroundColor: bgColor,
}));

@NearHuscarl已经给出了很好的回答！
如果你使用的是TypeScript，我使用的是utility function，所以我总是正确地输入prop名称：

export const shouldForwardProp = <CustomProps extends Record<string, unknown>>(
  props: Array<keyof CustomProps>,
  prop: PropertyKey,
): boolean => !props.includes(prop as string);

const MyComponent = styled('div', {
  shouldForwardProp: (prop) => shouldForwardProp<MyComponentProps>(['isDisabled', 'bgColor'], prop),
})<MyComponentProps>(({ theme, isDisabled, size, bgColor }) => ({
...