TypeScript 中用于布尔道具的 Storybook 代码片段

如何解决TypeScript 中用于布尔道具的 Storybook 代码片段

我从 Storybook 开始，总体而言，除了文档中的代码片段外，所有东西都开箱即用。

我用

• Nextjs 10.2.3
• TypeScript 4.3.2
• Storybook React 6.2.9 和附加组件

我按照此https://www.youtube.com/watch?v=Tja4I_rgspI

调整了我的故事书配置

如果我写一个简单的标题组件：

export interface headingProps {
  title: string;
  alternate: boolean;
}

const heading: FC<headingProps> = (props) => {
  const { title,alternate } = props;
  return (
    <TestH1 alternate={alternate} data-testid="test-header">
      {title}
    </TestH1>
  );
};

TestH1 是一个样式组件：

interface TestH1Props {
  alternate: boolean;
}

export const TestH1 = styled.h1<TestH1Props>`
  color: ${({ alternate }) => (alternate ? 'green' : '#0070f3')};
`;

故事书输出以下内容： comment

但是当布尔属性 alternate 为 false 时，我希望它显示一些实际上可以在我们的 TS 项目中复制/粘贴的内容，例如

<heading title="Welcome to Next.js!" alternate={false} />

我看到了这个

，但我不确定它是否相关，还检查了 Storybook 的 TS 文档，但不知道要调整什么。

我的故事书 main.js 如下：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx","../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],"addons": [
    "@storybook/addon-links","@storybook/addon-essentials"
  ],core: {
    builder: "webpack5",},}

如果您有想法或遇到同样的问题，我很想听听。 祝你有美好的一天！