如何使用Mantine组件实现下拉按钮？求最优实现方案

针对你遇到的圆角不协调、菜单宽度对齐问题，推荐以下几种可行的实现思路：

1. 用Group组件整合按钮与菜单触发按钮 #

将主按钮和菜单触发按钮放在Group组件中，设置spacing: 0消除间距，通过自定义radius属性让两个按钮的圆角衔接自然，同时手动设置菜单宽度与组合按钮总宽度一致：

import { Button, Group, Menu, MenuButton, MenuItem, MenuList, ChevronDown } from '@mantine/core';

function CombinedDropdown() {
  // 可根据按钮实际宽度调整menuWidth，或用CSS实现自适应
  const menuWidth = 240;

  return (
    <Group spacing={0}>
      <Button radius={{ right: 0 }}>主操作按钮</Button>
      <Menu>
        <MenuButton as={Button} radius={{ left: 0 }} rightSection={<ChevronDown size={16} />}>
          下拉
        </MenuButton>
        <MenuList width={menuWidth}>
          <MenuItem>选项1</MenuItem>
          <MenuItem>选项2</MenuItem>
          <MenuItem>更多操作</MenuItem>
        </MenuList>
      </Menu>
    </Group>
  );
}

2. 自定义容器组件，让菜单与整体容器对齐 #

用Box作为外层容器，通过ref将菜单的对齐目标指向整个容器，菜单设置width: 100%即可自动匹配容器宽度，同时调整按钮圆角实现无缝衔接：

import { Button, Box, Menu, MenuButton, MenuItem, MenuList, ChevronDown } from '@mantine/core';
import { useRef } from 'react';

function CustomAlignedDropdown() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <Box ref={containerRef} display="flex">
      <Button radius={{ right: 0 }}>主按钮</Button>
      <Menu target={containerRef.current}>
        <MenuButton as={Button} radius={{ left: 0 }} rightSection={<ChevronDown size={16} />}>
          下拉菜单
        </MenuButton>
        <MenuList width="100%">
          <MenuItem>编辑内容</MenuItem>
          <MenuItem>删除条目</MenuItem>
          <MenuItem>导出数据</MenuItem>
        </MenuList>
      </Menu>
    </Box>
  );
}

3. 用ActionIcon替代按钮作为下拉触发 #

如果希望视觉更紧凑，可将右侧下拉触发改为ActionIcon，与左侧按钮统一样式，调整圆角后实现无缝组合：

import { Button, Group, Menu, MenuButton, MenuItem, MenuList, ActionIcon, ChevronDown } from '@mantine/core';

function CompactDropdown() {
  return (
    <Group spacing={0}>
      <Button radius={{ right: 0 }}>主操作</Button>
      <Menu>
        <MenuButton as={ActionIcon} radius={{ left: 0 }} variant="filled">
          <ChevronDown size={16} />
        </MenuButton>
        <MenuList width={220}>
          <MenuItem>复制</MenuItem>
          <MenuItem>分享</MenuItem>
        </MenuList>
      </Menu>
    </Group>
  );
}

以上三种方案都能解决你提到的圆角不协调和菜单对齐问题，可根据产品视觉需求选择合适的实现方式。

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