ant-design / ant-design/pro-components
🐛[BUG]ProLayout组件不适配的问题
- 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的默认样式


### 🏞 期望结果
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
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