И зря избавился от DropdownMenuStyled. Я ранее тоже писал, что по неймингу лучше писать так: к имени компонента добавлять Styled, для стайлед-компонентов. Если у тебя компонент DropdownMenu, то для корневого элемента лучше заюзать DropdownMenuStyled, а вот внутри уже можешь что-то добавить еще (как тот же DropdownMenuListStyled (но не DropdownMenuBoxListStyled)). У тебя же сейчас получается
const DropdownMenuBoxListStyled = styled.ul
const DropdownMenuBoxStyled = styled.li
А я выше писал:
>> так как сейчас получается, что компонент с более коротким названием является вложенным в компонент с более длинным названием, что противоречит интуитивнопонятному неймингу
То есть ты переименовал, но пришел все к тому же: более короткое вложено в более длинное (к слову, я это заметил, только открыв исходники, хотя изначально по наименованию подумал про обратную вложенность). Плюс к этому у тебя DropdownMenuBoxStyled - это тег li и у тебя их много. Получается, у тебя много боксов в одном месте. Согласись, опять не интуитивно понятно. Я же советую так:
DropdownMenuStyled - это корневой ui,
DropdownMenuItemStyled - это li.
Поправь.