Reactjs 使用TypeScript添加自定义react故事书模板

你可以看到的源代码和复制

我想通过执行以下操作创建自定义故事书模板包装器：

App.tsx:

从“React”导入React；
导入“/App.css”；
导出接口道具{
标签：字符串；
}
const-App:React.FC=（{label}）=>{label}；
导出默认应用程序；

StorybookWrapper.tsx:

从“React”导入React；
从'@storybook/react/types-6-0'导入{Story}；
界面CustomTemplateProps{
成分：React.FC；
hasPadding？：布尔值；
}
const CustomTemplate:Story=（道具）=>{
常量{Component}=props；
返回(
);
};
导出默认自定义模板；

App.stories.tsx:

从“React”导入React；
//如果您可以处理6.1中的突破性更改，也可以从“@storybook/react”导出
从'@storybook/react/types-6-0'导入{Meta}；
从“./App”导入应用程序；
从“/StorybookWrapper”导入自定义模板；
导出默认值{
标题：“应用程序”，
}作为元；
export const Primary=CustomTemplate.bind（{}）；
Primary.args={
哈斯：是的，
组件：应用程序，
};

但是，我得到了以下的linting错误：

TS2322:类型“FC”不可分配给类型“FC”。参数“props”和“props”的类型不兼容。类型“{children？：ReactNode；}”不能分配给类型“PropsWithChildren”。类型“{children？：ReactNode；}”中缺少属性“label”，但类型“Props”中需要该属性

如何解决此linting错误，以便可以使用此自定义故事书模板，但也可以检测

应用程序
组件的自定义类型道具？对于
CustomTemplateProps
界面，我还应该做些什么？我试过下面这样的方法，但没用。谢谢

失败的解决方案：

从“React”导入React；
从'@storybook/react/types-6-0'导入{Story}；
界面CustomTemplateProps{
成分：React.FC；
hasPadding？：布尔值；
}
const CustomTemplate:Story=（道具）=>{
常量{Component}=props；
返回(
);
};
导出默认自定义模板；
StorybookWrapper.tsx

import React from 'react';
import { Story } from '@storybook/react/types-6-0';

interface CustomTemplateProps {
  Component: React.FC<any>; // Updated
  hasPadding?: boolean;
}

const CustomTemplate: Story<CustomTemplateProps> = (props) => {
  const { Component } = props;

  return (
    <div style={{ padding: props.hasPadding ? '2rem' : '0' }}>
      <Component />
    </div>
  );
};

export default CustomTemplate;

从“React”导入React；
从'@storybook/react/types-6-0'导入{Story}；
界面CustomTemplateProps{
组件：React.FC；//已更新
hasPadding？：布尔值；
}
const CustomTemplate:Story=（道具）=>{
常量{Component}=props；
返回(
);
};
导出默认自定义模板；
fixed您的解决方案是什么？谢谢，但这不会检测到
组件所需的自定义道具