避免 Storybook 控件中的空值

Question

我使用 class-variance-authority 创建按钮变体，然后从中推断按钮道具的类型：

const variants = cva(
  {
    variants: {
      intent: {
        primary: [
          ...
        ],
        secondary: [
          ...
        ],
        ghost: [
          ...
        ],
      },
      size: {
        ...
      },
    },
    defaultVariants: {
      intent: "primary",
      size: "md",
    },
  }
);

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof variants>

这在应用程序中运行良好。我可以向按钮添加意图道具或回退到默认按钮。

但是在故事书中，在意图的控制下，我从 cva 和空值中获得变体。

如果我选择 null，我的按钮没有任何变体样式（我的印象是它会回退到默认样式）。
为了避免 null，我必须在按钮道具下添加额外的类型，这样基本上就会覆盖从 cva 推断出的类型。

那么，当单击 null 时如何才能回退，或者如何在不覆盖从 cva

推断的类型的情况下完全看不到 null 值

当我添加到按钮道具时

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof variants> & {
     intent?: string;
  };

空值消失了

Answer 1

我在cva github上留下了询问并收到了下面的回复。 https://github.com/joe-bell/cva/issues/253

朋友们，我想很快就会有补丁。

或者，这里也是替代方案。 从类型的属性中删除 null 或未定义