Исключить разделитель MUI после последнего пункта меню

Я использую компоненты 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>
  );
};
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из способов сделать это — передать компоненту MenuGroupSection реквизит, указывающий, что он последний:

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

А затем визуализируйте разделитель, только если он не последний:

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

Это сработает для вас?

Я согласен, хотя isDivided или divider — более связное имя переменной, если этому компоненту не нужно знать, что это элемент в списке,

Digital Fu 04.04.2024 15:17

Другие вопросы по теме