如何在NextUI/React中正确扩展带自定义Props的组件并消除警告？

问题原因 #

你用extendVariants添加的自定义布尔props会被透传到组件底层的DOM元素（比如<a>标签）上，React不识别这些非标准DOM属性，因此抛出警告。extendVariants的设计初衷是管理组件的样式变体，并非处理业务逻辑类的自定义props。

正确解决方案（TypeScript） #

方法一：封装组件并过滤自定义Props

通过封装组件，手动过滤自定义props，避免其透传到DOM元素，同时保留类型安全。

import { extendVariants } from "@nextui-org/system";
import { Link, LinkProps } from "@nextui-org/link";
import { ComponentPropsWithoutRef } from "react";

// 先通过extendVariants定义样式变体的基础组件
const StyledLink = extendVariants(Link, {
  defaultVariants: {
    color: 'foreground',
  },
  // 此处可添加样式变体逻辑（如variants、compoundVariants）
});

// 定义自定义Props类型：继承原LinkProps，追加自定义布尔属性
type CustomLinkProps = ComponentPropsWithoutRef<typeof StyledLink> & {
  booleanProps1?: boolean;
  booleanProps2?: boolean;
};

// 封装组件，过滤自定义props并处理业务逻辑
const CustomLink = ({ booleanProps1, booleanProps2, ...rest }: CustomLinkProps) => {
  // 示例：根据自定义props调整样式或行为
  const className = `${rest.className || ''} ${booleanProps1 ? 'custom-highlight' : ''}`;

  return <StyledLink {...rest} className={className} />;
};

export default CustomLink;

使用方式：

<CustomLink className="my-class" booleanProps1 href="#">My link</CustomLink>

方法二：利用NextUI变体系统（样式类自定义Props）

如果自定义props是用来控制样式的，推荐使用NextUI原生的变体系统，更符合框架设计规范：

import { extendVariants } from "@nextui-org/system";
import { Link, LinkProps } from "@nextui-org/link";

const CustomLink = extendVariants(Link, {
  defaultVariants: {
    color: 'foreground',
  },
  variants: {
    // 用自定义变体替代布尔props，直接绑定样式
    isSpecial: {
      true: {
        color: 'primary',
        fontWeight: 'bold',
        textDecoration: 'underline',
      },
      false: {}
    },
  },
});

// 扩展Props类型，添加自定义变体
type CustomLinkProps = LinkProps & {
  isSpecial?: boolean;
};

export default CustomLink as React.FC<CustomLinkProps>;

使用方式：

<CustomLink className="my-class" isSpecial href="#">My link</CustomLink>

关键注意点 #

• extendVariants仅用于样式变体管理，不要用来添加业务逻辑类的自定义props。
• 封装组件时必须过滤自定义props，防止其透传到DOM元素触发React警告。
• TypeScript环境下要正确定义Props类型，确保类型校验与代码提示正常工作。

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