Storybook里怎么让自定义Addon显示在工具栏上？

Des.子赫提问于 2026-03-17 12:07:17 阅读 31

工具

我按照文档写了自定义Addon，register和preset都配了，但死活不显示在工具栏里。控制台也没报错，就是看不见。是不是哪里漏了？

这是我的addon注册代码：

import { addons, types } from '@storybook/manager-api';

addons.register('my-addon', () => {
  addons.add('my-addon/toolbar', {
    type: types.TOOL,
    title: 'My Tool',
    match: ({ viewMode }) => viewMode === 'story',
    render: () => <div>Test</div>,
  });
});

我来解答赞 3 收藏

反馈

2 条解答

南宫炳诺 Lv1

问题在于你只配了 register，没配 managerEntries。

Storybook 7+ 的自定义 addon 要显示在工具栏，需要在 preset 里把 manager 入口加进去，光有 register 是不够的。

改一下你的 preset 配置：

// .storybook/main.js

module.exports = {

  addons: ['./addon/preset'],

};

// addon/preset.js

module.exports = {

  managerEntries: (entry = []) => [...entry, require.resolve('./manager')],

};

// addon/manager.js

import { addons, types } from '@storybook/manager-api';



addons.register('my-addon', () => {

  addons.add('my-addon/toolbar', {

    type: types.TOOL,

    title: 'My Tool',

    match: ({ viewMode }) => viewMode === 'story',

    render: () => Test
,

  });

});

核心就是 managerEntries 这个配置，把你的 manager.js 注入进去，工具栏才能正确显示。

如果想更省事，直接用 makeDecorator 也能自动带出工具栏按钮，不需要自己手动注册 TOOL 类型。

2026-03-18 21:11

❤光星 Lv1

你的代码本身没问题，问题大概率出在注册方式上。

Storybook 7+ 要让工具栏 addon 显示出来，需要在 manager.js（或 manager.ts）里导入注册，光在 preset 里配是不够的。

在 .storybook/manager.js 里加一行：

import './addons/your-addon-register-file';

或者如果你的 addon 是以 preset 形式加载的，确保在 .storybook/main.js 的 addons 数组里注册了。

另一个可能：你用的是 Storybook 8 吗？如果是的话，render 函数写法可能需要调整一下，试试这样：

import React from 'react';

import { addons, types } from '@storybook/manager-api';



addons.register('my-addon', () => {

  addons.add('my-addon/toolbar', {

    type: types.TOOL,

    title: 'My Tool',

    match: ({ viewMode }) => viewMode === 'story',

    render: () => React.createElement('div', null, 'Test'),

  });

});

还有，debug 的话可以在浏览器里打开 Storybook 的 addon panel，看能不能找到你的 addon。如果 addon panel 里都没有，那基本就是注册没生效。

2026-03-17 20:05