ReactJS+Storybook：如何在侧边栏品牌图片下方添加自定义文本？

Great question! While Storybook doesn’t have a built-in "toggle custom text" option out of the box, it gives you full control over customizing the sidebar UI via its extension API. Let’s walk through the most reliable ways to achieve this—no messy DOM hacks required.

Option 1: Replace the Sidebar Header (Storybook 7+) #

Storybook 7 introduced a cleaner way to customize the sidebar header directly via configuration. Here’s how to build a custom header that includes your brand logo and text:

1. Create a custom header component in your .storybook/manager.js (or manager.tsx for TypeScript):

import { addons } from '@storybook/addons';
import { Header } from '@storybook/components';
import { useTheme } from '@storybook/theming';

const CustomSidebarHeader = () => {
  // Access Storybook's theme to match styling
  const theme = useTheme();

  return (
    <Header>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '16px 0',
        gap: '8px'
      }}>
        {/* Your brand logo - place it in Storybook's public folder */}
        <img
          src="/your-brand-logo.svg"
          alt="Brand Logo"
          style={{ width: '48px' }}
        />
        {/* Your custom text - style it to match Storybook's theme */}
        <span style={{
          fontSize: '12px',
          color: theme.textMuted,
          fontWeight: 500
        }}>
          Your Custom Text Here (e.g., Design System v2.1)
        </span>
      </div>
    </Header>
  );
};

// Register your custom header with Storybook
addons.setConfig({
  sidebar: {
    header: CustomSidebarHeader,
  },
});

2. Drop your brand logo into the public folder at the root of your project (so Storybook can serve it at /your-brand-logo.svg).

Option 2: For Older Storybook Versions (<=6.5) #

If you’re on an older version, you’ll need to register a custom addon to override the sidebar header:

import { addons, types } from '@storybook/addons';
import { Header } from '@storybook/components';
import { useTheme } from '@storybook/theming';

const CustomSidebarHeader = () => {
  const theme = useTheme();
  // Same component as above, with your logo and text
};

addons.register('custom-sidebar-header', () => {
  addons.add('custom-sidebar-header', {
    type: types.PANEL,
    title: '',
    render: () => null,
    // Override the default header component
    override: {
      components: {
        SidebarHeader: CustomSidebarHeader,
      },
    },
  });
});

Key Notes #

• Avoid direct DOM manipulation: Don’t try to "get the sidebar instance" or hack into existing DOM elements—Storybook’s internal structure changes between versions, so this approach will break easily. The component-based method above is officially supported.
• Theme consistency: Use useTheme() to pull Storybook’s built-in colors and styles, so your custom text blends seamlessly with the rest of the UI.
• Image pathing: Make sure your logo is in the correct public folder, or use an absolute URL if it’s hosted elsewhere.

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