类型上不存在属性“args”（args：道具）

Question

我不明白为什么我会收到此错误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>
  );
}

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

编辑。

我编辑了界面

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

还有PrimaryA对象

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

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

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

Answer 1

您需要使用 Typescript 版本，现在是文档中的一个选项（https://storybook.js.org/docs/react/get-started/whats-a-story），但相关代码如下：

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',
};

Answer 2

如果你使用的是 vue3

import Button from '../components/Button.vue'
import { IButtonProps } from '../types/types'
import { Meta, Story } from '@storybook/vue3'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes:{
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
    onClick: {},
  },
} as Meta;


    const Template: Story<IButtonProps>  = (args ) => ({
  components: { Button },
  setup() {
    return { args }
  },
  template: '<Button v-bind="args" />',
})

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  title: '\u{1F9D1}\u{200D}\u{1F3A8}',
  backgrounColor: 'red'
}