如何在不修改BaseGrid的情况下将其转为div并保留默认Props？

要在不修改原BaseGrid组件的前提下，将其渲染为div并保留所有默认Props，你可以通过以下两种正确方式实现：

方法一：使用styled-components链式调用（推荐） #

利用styled-components的特性，直接基于原组件扩展，通过attrs指定新的标签类型，同时自动继承原组件的所有样式和默认Props：

import { BaseGrid } from '/somefolder';

const SectionGrid = styled(BaseGrid).attrs({
  as: 'div' // 替换底层标签为div
})`
  /* 这里添加你的自定义样式 */
`;

如果原BaseGrid通过attrs定义了默认Props（比如role、aria-label等），styled-components会自动合并这些默认值，除非你显式覆盖。

方法二：自定义包裹组件 #

如果你需要更灵活的逻辑（比如自定义className处理），可以写一个包裹组件，确保所有原Props都传递给BaseGrid，同时指定forwardedAs：

import { BaseGrid } from '/somefolder';
import { addClassName } from './your-utils';

// 继承原BaseGrid的Props类型，避免类型丢失
type SectionGridProps = React.ComponentProps<typeof BaseGrid> & {
  className?: string;
};

const SectionGrid = ({ className, ...rest }: SectionGridProps) => {
  return (
    <BaseGrid
      forwardedAs="div"
      className={addClassName('section-grid', className)}
      {...rest} // 传递所有原Props，包括默认值
    />
  );
};

为什么你之前的写法无效？ #

• 第一种写法中，你重复定义了SectionGrid变量，导致后定义的组件覆盖了前一个；另外若原BaseGrid存在默认attrs，需确保新的attrs没有意外覆盖这些默认值。
• 第二种写法同样存在重复定义SectionGrid的问题，且解构时单独取出forwardedAs没有必要，只要通过...rest传递所有未处理的Props，就能保留原组件的默认属性。

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