Storybook -如何使用样式化组件(React + TS)从外部项目导入组件？

Storybook是一个用于开发、测试和演示React组件的工具。它提供了一个独立的环境，可以在其中以交互的方式浏览和测试组件。

要从外部项目导入组件并在Storybook中使用样式化组件，可以按照以下步骤进行操作：

确保你的外部项目是一个独立的React组件库，并且已经安装了Storybook。
在Storybook的配置文件（通常是.storybook/main.js或.storybook/config.js）中，添加一个webpack配置，以允许导入外部项目的组件。例如：

module.exports = {
  // ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [require.resolve('babel-preset-react-app')],
          },
        },
        require.resolve('react-docgen-typescript-loader'),
      ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

在Storybook的stories目录中，创建一个新的.story文件（例如MyComponent.stories.tsx），用于编写组件的Storybook故事。

import React from 'react';
import { Meta, Story } from '@storybook/react';
import { MyComponent } from 'your-external-project';

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
} as Meta;

const Template: Story = (args) => <MyComponent {...args} />;

export const Default = Template.bind({});
Default.args = {
  // 设置组件的props
};