Storybook：如何强制 Storybook 不为我的组件创建文件夹

Question

对于我的所有其他组件，Storybook 直接显示故事（没有子文件夹）。但是在我名为“IconButton”的组件中，它创建了一个子文件夹，然后显示了实际文件。我怎样才能让它不显示文件夹？

我所有的其他文件都是这样的

import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";

import { IconButton } from "./IconButton";
import { IconButtonDemo } from "./IconButton.demo";

export default {
    title: "Atoms/IconButton",
    component: IconButton,
} as ComponentMeta<typeof IconButton>;

const IconButtonComponentStory: ComponentStory<typeof IconButton> = () => <IconButtonDemo />;

export const _IconButton = IconButtonComponentStory.bind({});

Answer 1

发生这种情况是因为故事名称是自动开始的。因此，您打算作为故事名称的名称 IconButton 在呈现时变为 Icon Button。

解决方法是手动设置Story名称，使其与Component名称匹配。

_IconButton.storyName = "图标按钮";

应该可以解决您的问题；

Storybook：如何强制 Storybook 不为我的组件创建文件夹

Storybook: How to force Storybook to NOT create a folder for my component

storybook