如何使用material-ui@next MenuItem进行工艺路线？

import React from 'react';
import { Menu, MenuItem } from 'material-ui-next';

const CraftRouteMenu = () => {
  return (
    <Menu>
      <MenuItem>步骤1</MenuItem>
      <MenuItem>步骤2</MenuItem>
      <MenuItem>步骤3</MenuItem>
      {/* 添加更多的步骤 */}
    </Menu>
  );
}

export default CraftRouteMenu;

import React from 'react';
import CraftRouteMenu from './CraftRouteMenu';

const App = () => {
  return (
    <div>
      {/* 其他组件 */}
      <CraftRouteMenu />
      {/* 其他组件 */}
    </div>
  );
}

export default App;

import React from 'react';
import { Menu, MenuItem, IconButton } from 'material-ui-next';
import { Delete, Edit } from 'material-ui-icons';

const CraftRouteMenu = () => {
  const handleItemClick = (step) => {
    // 处理点击事件
  }

  return (
    <Menu>
      <MenuItem>
        <IconButton>
          <Edit />
        </IconButton>
        步骤1
      </MenuItem>
      <MenuItem>
        <IconButton>
          <Edit />
        </IconButton>
        步骤2
      </MenuItem>
      <MenuItem>
        <IconButton>
          <Edit />
        </IconButton>
        步骤3
      </MenuItem>
      {/* 添加更多的步骤 */}
    </Menu>
  );
}

export default CraftRouteMenu;