Skip to content

4.0.0-alpha.2 After wrapping with ConfigProvider, the submenu style rendering of the Menu component and the style when selected are incorrect #6368

Closed
@van-chin

Description

@van-chin
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

^4.0.0-alpha.2

Environment

vite 4.2 chrome vue3.x

Reproduction link

Edit on CodeSandbox

Steps to reproduce

https://codesandbox.io/p/sandbox/weathered-voice-hizlz6?file=%2FREADME.md

使用 ConfigProvider

<ConfigProvider>
<a-menu
id="dddddd"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
style="width: 256px"
mode="inline"
theme="dark"
@click="handleClick"
>
<a-sub-menu key="sub1" @titleClick="titleClick">
<template #icon>
<MailOutlined />
</template>
<template #title>Navigation One</template>
<a-menu-item-group key="g1">
<template #icon>
<QqOutlined />
</template>
<template #title>Item 1</template>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group key="g2" title="Item 2">
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-sub-menu key="sub2" @titleClick="titleClick">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Two</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
</ConfigProvider>

What is expected?

样式渲染正确

What is actually happening?

子菜单及子菜单选中时背景都有问题

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions