Reactjs 布尔型道具的TypeScript中的故事书代码片段

我从故事书开始，总体来说，除了文档中的代码片段之外，所有的东西都是开箱即用的

我用

• Nextjs 10.2.3
• 打字稿4.3.2
• Storybook将6.2.9与附加组件essentials结合起来

下面我调整了我的故事书配置

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

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>
  );
};

interface TestH1Props {
  alternate: boolean;
}

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

我看到了这一点，但我不确定它是否相关，也检查了TS文档中的Storybook，但无法确定要调整什么

我的故事书main.js如下：

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

如果你有想法或者遇到了同样的问题，我很乐意听听。 祝你今天愉快

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