我不明白为什么我会收到这个错误 Property 'args' does not exist on type (args: Props) => Element

我正在尝试将 args 添加到我的 Storybook 组件中。这是我的.stories.tsx文件的样子

import React from "react";
import { Story, Meta } from "@storybook/react";

import { Props, Button } from ".";

export default {
  title: "General/Button",
  component: Button
} as Meta;

const Template = (args: Props) => <Button {...args} />;

export const PrimaryA = Template.bind({});

PrimaryA.args = {  <-- ERROR
  variant: "primary"
};

以及.tsxButton 组件的简单文件

import { css } from "@emotion/react";
import React from "react";

export interface Props {
   args: {
     variant: string;
    children?: React.ReactNode;
  },
}

const style = css`
  .primary {
    background: #0082ff;
    border-radius: 8px;
    width: 150px;
    height: 50px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
  }
`;

export function Button(props: Props) {
  const { variant = "primary", children = "Primary", ...rest } = props.args;
  return (
    <div css={style} className={`button ${variant}`} {...rest}>
      {children}
    </div>
  );
}

你怎么能看到我已经有了 .args在接口 Props 中属性了。我不知道如何解决它。谢谢 ：））

编辑。

我编辑了界面

export interface Props {
  variant: string;
  children?: React.ReactNode;
}

以及PrimaryA对象

const Template = (props: Props) => <Button {...props} />;

export const PrimaryA = Template({
  variant: "disabled"
});

而且还是什么都没有。我在 Storybook 中看不到组件

回答

import {Meta, Story} from "@storybook/react";

export default {
  title: "Button",
  component: Button,
} as Meta;

// We create a “template” of how args map to rendering
const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Primary',
};