如何在Storybook中动态配置Material UI Menu的anchorOrigin与transformOrigin

当然可以动态配置anchorOrigin和transformOrigin，下面是具体实现步骤：

1. 修改自定义Menu组件，支持位置配置Props #

注意：你的组件名称和Material UI内置的Menu组件重名了，建议改成CustomMenu避免命名冲突，修改后的组件会接收位置参数并设置默认值，保证不传入参数时也能正常运行：

import React from 'react';
import { ThemeProvider, Button, Menu, MenuItem } from '@mui/material';
// 导入你的自定义主题（根据实际路径调整）
import { muiTheme } from './your-theme-path';

export const CustomMenu = ({
  anchorOrigin = { vertical: 'top', horizontal: 'left' },
  transformOrigin = { vertical: 'top', horizontal: 'left' },
  buttonText = 'Dashboard'
}) => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <div>
            <ThemeProvider theme={muiTheme}>
                <Button
                    id="demo-positioned-button"
                    aria-controls={open ? 'demo-positioned-menu' : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? 'true' : undefined}
                    onClick={handleClick}
                    style={{ textTransform: "capitalize" }}
                >
                    {buttonText}
                </Button>
            </ThemeProvider>
            <Menu
                id="demo-positioned-menu"
                aria-labelledby="demo-positioned-button"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                anchorOrigin={anchorOrigin}
                transformOrigin={transformOrigin}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </div>
    );
}

2. 配置Storybook，添加动态位置控制项 #

修改stories.js，配置Storybook的Controls面板，让用户可以直观选择垂直/水平方向的位置参数，实时预览效果：

import { CustomMenu } from './your-menu-component-path';

export default {
  title: 'Components/CustomMenu',
  component: CustomMenu,
  argTypes: {
    anchorOrigin: {
      control: {
        type: 'object',
        fields: {
          vertical: {
            options: ['top', 'center', 'bottom'],
            control: { type: 'select' }
          },
          horizontal: {
            options: ['left', 'center', 'right'],
            control: { type: 'select' }
          }
        }
      },
      defaultValue: { vertical: 'top', horizontal: 'left' }
    },
    transformOrigin: {
      control: {
        type: 'object',
        fields: {
          vertical: {
            options: ['top', 'center', 'bottom'],
            control: { type: 'select' }
          },
          horizontal: {
            options: ['left', 'center', 'right'],
            control: { type: 'select' }
          }
        }
      },
      defaultValue: { vertical: 'top', horizontal: 'left' }
    },
    buttonText: { control: 'text' }
  }
};

export const PositionConfigurable = (args) => <CustomMenu {...args} />;
PositionConfigurable.args = {
  buttonText: 'Dashboard'
};

额外说明 #

• 组件通过接收anchorOrigin和transformOrigin props，把原本硬编码的位置配置改成了可动态传入的参数，默认值保证了组件的基础可用性。
• Storybook的argTypes配置让你在Controls面板中可以分别选择垂直、水平方向的位置，实时查看Menu的位置变化。
• 如果觉得对象形式的参数不够直观，也可以把垂直和水平方向拆成单独的props（比如anchorVertical、anchorHorizontal），再在组件内部组合成anchorOrigin对象，进一步简化操作。

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