排除菜单中最后一项之后的 MUI 分隔线

Question

我正在使用 MUI 组件，并在每个类别后面添加一个分隔符。有没有办法排除最后一个类别之后的分隔线？

这是我的代码； （分隔符位于标签之前的底部。

    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>
  );
};

Answer 1

一种方法是将一个 prop 传递给 MenuGroupSection 组件，表明它是最后一个：

const MenuGroupSection = ({ label, groups, menuVariant, onItemClick, isLast }: MenuGroupSectionProps) => {

然后仅在不是最后一个时才渲染 Divider：

{!isLast ? <Divider sx={{ marginLeft: '16px', marginRight: '16px' }} /> : null}

这对你有用吗？