ant-design / ant-design/pro-components

ProLayout里面的Menu.Item如何自定义高度

Open
#8,160 1 comment 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

### 🧐 问题描述

ProLayout里面的Menu.Item如何自定义高度,目前高度是40px

### 💻 示例代码
```jsx
menuItemRender={(menuItemProps, defaultDom) => {
return

{menuItemProps.name}

}}
```
```jsx
menuItemRender={(menuItemProps, defaultDom) => {
return (

{menuItemProps.name}

)
}}
```
```jsx
menuItemRender={(menuItemProps, defaultDom) => {
return (


{menuItemProps.name}


)
}}
```
在issue里搜到的三种可能的写法,均是错误的,无法满足要求。
因为menuItemRender是内置的Menu.Item的children,而这个Menu.Item是height为40且overflow为hidden的,所以menuItemRender里的内容只要超过40px都是无法显示的。(见附图。)

希望回答人员能够认真看描述来回答。

### 🚑 其他信息
![image](https://github.com/ant-design/pro-components/assets/10381674/8352b57b-e4f4-4e40-a4fe-f4186d6e6987)

Contributor guide

Open the contributing guide

Research direction

Start at ProLayout's menuItemRender path and the internal Menu.Item described in the issue, focusing on the 40px height and hidden overflow. Compare the provided JSX approaches and determine what supported customization is needed; done means menu items can use a custom height without their content being clipped.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.