如何移除MUI菜单中最后一个分类后的Divider分隔线

我正在使用MUI组件，为每个分类添加Divider分隔线，请问有没有办法去掉最后一个分类后的分隔线？

以下是我的代码（分隔线位于底部标签之前）：

export const MenuItemGroup = ({ label, items, menuVariant, onItemClick }: MenuItemGroupProps) => {
  return (
    <Box>
      <>
        {label !== undefined && label !== null ? (
          <Box sx={{ margin: '16px', marginBottom: '8px' }}>
            <Typography variant="body2medium" sx={{ color: 'var(--sds-ref-color-base-black70)' }}>
              {label}
            </Typography>
          </Box>
        ) : (
          <></>
        )}
      </>
      <>
        {items &&
          items.map((item, itemIndex) => {
            return <MenuItem key={itemIndex} item={item} menuVariant={menuVariant} onItemClick={onItemClick} />;
          })}
      </>
    </Box>
  );
};

const MenuGroupSection = ({ label, groups, menuVariant, onItemClick }: MenuGroupSectionProps) => {
  return (
    <Stack direction="column" sx={{ display: 'flex', width: '100%' }}>
      {label !== undefined && label !== null ? (
        <>
          <Box sx={{ margin: '16px', marginBottom: '8px' }}>
            <Typography variant="body2semibold" sx={{ color: '#000000' }}>
              {label}
            </Typography>
          </Box>
        </>
      ) : (
        <></>
      )}
      <Stack direction="row" sx={{flexWrap: 'wrap', display:'grid' , gridTemplateColumns : 'auto auto' }}>
        {groups &&
          groups.map((group, index) => {
            return (
              <MenuItemGroup
                key={index}
                label={group.label}
                items={group.items as MenuItemNode[]}
                onItemClick={onItemClick}
                menuVariant={menuVariant}
              ></MenuItemGroup>
            );
          })}
      </Stack>
      <Divider sx={{ marginLeft: '16px', marginRight: '16px' }} />
    </Stack>
  );
};

解决方法 #

方法一：通过Props控制渲染（推荐）

给MenuGroupSection新增一个isLast属性，精准控制最后一个分类的分隔线是否显示：

1. 更新组件Props定义，添加isLast参数：

interface MenuGroupSectionProps {
  label?: string | null;
  groups?: any[]; // 替换成你实际的类型
  menuVariant?: string;
  onItemClick?: () => void;
  isLast?: boolean; // 新增属性
}

2. 修改MenuGroupSection内部逻辑，仅在非最后一个分类时渲染分隔线：

const MenuGroupSection = ({ label, groups, menuVariant, onItemClick, isLast = false }: MenuGroupSectionProps) => {
  return (
    <Stack direction="column" sx={{ display: 'flex', width: '100%' }}>
      {/* 原有代码保持不变 */}
      <Stack direction="row" sx={{flexWrap: 'wrap', display:'grid' , gridTemplateColumns : 'auto auto' }}>
        {groups &&
          groups.map((group, index) => {
            return (
              <MenuItemGroup
                key={index}
                label={group.label}
                items={group.items as MenuItemNode[]}
                onItemClick={onItemClick}
                menuVariant={menuVariant}
              ></MenuItemGroup>
            );
          })}
      </Stack>
      {/* 新增判断：非最后一个分类才渲染分隔线 */}
      {!isLast && <Divider sx={{ marginLeft: '16px', marginRight: '16px' }} />}
    </Stack>
  );
};

3. 在父组件循环渲染时，给最后一个MenuGroupSection传递isLast={true}：

// 假设父组件中是这样循环渲染分类的
{yourSectionList.map((section, index) => (
  <MenuGroupSection
    key={index}
    label={section.label}
    groups={section.groups}
    menuVariant={menuVariant}
    onItemClick={onItemClick}
    isLast={index === yourSectionList.length - 1}
  />
))}

方法二：CSS伪类隐藏（无需修改组件逻辑）

如果不想改动组件Props，可以直接给MenuGroupSection的父容器添加样式，通过last-child伪类隐藏最后一个分类的分隔线：

// 父容器示例（比如Stack/Box）
<Stack sx={{
  '& > div:last-child .MuiDivider-root': {
    display: 'none'
  }
}}>
  {yourSectionList.map((section) => (
    <MenuGroupSection key={section.id} {...sectionProps} />
  ))}
</Stack>

这种方式利用CSS选择器定位到最后一个分类内部的Divider，直接隐藏它，适合快速实现需求的场景。

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