ant-design / ant-design/pro-components

🐛[BUG]ProLayout组件不适配的问题

Open
#8,678 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

1. ProLayout 会跟antd内部的menu的样式互相影响;
2. ProLayout 的配置项pageContainer-paddingInlinePageContainerContent即使设置了,内容区依然会有一个默认的间距
3. ProLayout 收起菜单时,icon不能居中

### 📷 复现步骤
第一个问题:
当使用了antd内部的组件的任意版本menu组件时,layout的menu样式会被覆盖,antd是使用的where。(我这里是测试5.6-5.20任意版本)
```
:where(.css-dev-only-do-not-override-1o20a2g).ant-menu-light .ant-menu-item-selected{
color:red
}
```
第二个问题:
样式中会有一个dom结构存在默认样式无法取消,提供的配置项只是对`.ant-pro-layout .ant-pro-layout-content`生效,但是其子项dom会有一个默认样式(虽然可以临时使用global样式覆盖)

```
.ant-pro-page-container-children-content{
padding-block: 24px;
padding-inline: 40px;
}
```
第三个问题:
不能正确的j居中,发现有设置0的默认样式
![image](https://github.com/user-attachments/assets/a6c855d4-22b0-4c25-9bb0-5c118b1145c0)
![image](https://github.com/user-attachments/assets/84d41227-4ca0-4571-b551-12458027af06)

### 🏞 期望结果
1. 兼容antd,能正常渲染layout下的menu菜单
2. 去除`.ant-pro-page-container-children-content`的默认样式,或者提供配置项
3. 缩起菜单能正常显示

### 💻 复现代码
```
"@umijs/max": "4.1.10",
"antd": "^5.20.3", // 缩小版本也一样的,我这里是需要升级antd
"@ant-design/pro-components": "^2.7.15",
```

### © 版本信息

- ProComponents 版本: 2.7.15
- umi 版本 "@umijs/max": "4.1.10"
- 浏览器环境 chrome
- 开发环境 macos

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the three reported problems in ProLayout with @umijs/max 4.1.10, antd 5.20.3, and ProComponents 2.7.15. Inspect the interaction with antd Menu and the listed .ant-pro-layout and .ant-pro-page-container-children-content styles; done means Menu styling is compatible, the content padding is configurable or absent, and collapsed-menu icons are centered.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.