storybook中剔除chakra-ui的影响，或者剔除其他ui包的影响

介绍

1. 经过一系列初始化完成后，storybook项目启动出来发现多余了一个ui框架的内容。如下图
   
2. 因为项目中仅仅使用chakraUI的一些功能，并没有使用整体组件功能，所以说完全没必要把它留着这里。
3. 经过排查可以使用storybook中的refs功能剔除掉不需要的chakraui框架组件介绍如下代码
   （位置：/.storybook/main.ts）

import type { StorybookConfig } from '@storybook/nextjs';const config: StorybookConfig = {stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],refs: {'@chakra-ui/react': { disable: true },},addons: ['@storybook/addon-onboarding','@storybook/addon-links','@storybook/addon-essentials','@chromatic-com/storybook','@storybook/addon-interactions',],framework: {name: '@storybook/nextjs',options: {},},staticDirs: ['..\\public'],
};
export default config;

主要代码：

  refs: {'@chakra-ui/react': { disable: true },},

4. 更改完上述代码后重新启动项目即可。如下（干干净净最好）
   

5. 如果有其他ui框架或者其他包影响到了都可以使用refs这个去配置

6. 其他包：
   一些包依赖会自动将它们的Storybook组合到您的Storybook中。
   您可以通过将包名称的disable设置为true来禁用此行为:

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {framework: '@storybook/your-framework',stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],refs: {'package-name': { disable: true },},
};export default config;

参考

1. 快速进入官网refs配置入口