React Fluent UI集成Storybook时组件失效，需添加特定插件吗？

不需要额外添加特定的Storybook addon，组件失效大概率是因为样式未正确加载、依赖不全或webpack配置缺失导致的，以下是具体修复步骤：

1. 补全Fluent UI核心依赖 #

你当前只安装了Fluent UI的图标库，若使用Northstar组件库，必须安装核心依赖：

npm install @fluentui/react-northstar@^0.60.1 --save

2. 导入Fluent UI全局样式 #

在.storybook/preview.js文件中添加全局样式导入，确保组件样式能正常加载：

import '@fluentui/react-northstar/dist/css/fui-components.css';

3. 添加全局装饰器包裹Provider #

同样在.storybook/preview.js中添加Fluent UI的Provider装饰器，为所有Story提供组件上下文：

import { Provider } from '@fluentui/react-northstar';

export const decorators = [
  (Story) => (
    <Provider>
      <Story />
    </Provider>
  ),
];

4. 调整webpack配置处理CSS #

在.storybook/main.js的webpackFinal中添加CSS解析规则，确保webpack能正确处理Fluent UI的CSS文件：

webpackFinal: async (config, { configType }) => {
  config.resolve.modules.push('app');

  // 新增CSS loader配置
  config.module.rules.push({
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    include: /node_modules\/@fluentui/
  });

  return config;
},

若你的项目未安装style-loader和css-loader，需先安装：

npm install style-loader css-loader --save-dev

验证修复 #

重启Storybook服务，检查Fluent UI组件是否正常渲染。

内容的提问来源于stack exchange，提问作者Akhil