bug: extra element break menu style

[kagawagao]

tdesign-vue-next-starter/src/layouts/components/MenuContent.vue

Line 2 in b73708b

<div>

this element make child combinator(>) in menu style breaked

https://github.com/Tencent/tdesign-common/blob/50bcb279b7ced6dea5b0d359972156c7e7c00124/style/web/components/menu/_index.less#L278-L291

[github-actions]

👋 @kagawagao，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @timi137137 @liweijie0812 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @kagawagao 。

[kagawagao]

sorry for not use issue template, this issue is create with code reference directly

[timi137137]

hummm，sorry，i don't quite understand what the question is, perhaps you can provide more information?

[kagawagao]

MenuItem and SubMenu is wrapped by div in MenuContent component, this make css child combinator(>) selector not work.

For example

less styles in common

& > *:not(.@{prefix}-menu-group) {
        &:not(:first-child) {
          margin-top: @comp-margin-xs;
        }
      }

which compiled to css is

.t-default-menu__inner .t-menu>*:not(.t-menu-group):not(:first-child) {
  margin-top: var(--td-comp-margin-xs);
}

this css style make only .t-menu direct child elements has margin-top, but you guys add div element to wrap MenuItem and SubMenu, and then, css selector has been breaked, all MenuItem's margin-top property not been applied

[kagawagao]

Menu in TDesign Site:

Menu in Starter: