fix(typography): menu item title cannot be centered vertically #41146
Conversation
|
|
Codecov ReportAll modified lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #41146 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 681 681
Lines 11522 11522
Branches 3097 3097
=========================================
Hits 11522 11522 ☔ View full report in Codecov by Sentry. |
|
不应该删默认 line-height，应该增加 menu item 的 line-height 的样式选择器优先级。 |
嗯嗯，但是目前由于 typography 存在默认 line-height 导致很多嵌套在 typography 内部的文本无法保持垂直居中，提升 menu item 其 line-height 的优先级是可以解决关联问题，但是后续可能还会出现类似的问题 |
|
typography 默认 line-height 是合理的，否则文本段行高不对。 |
嗯嗯 |
这个当初是想看下影响大不大，但现在看来只能从应用场景来解决问题了 |
Yuiai01
force-pushed
the
typography-style
branch
from
24b8789
to
3f4a63f
Compare
components/menu/style/index.tsx
Outdated
| @@ -303,6 +303,10 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => { | |||
|
|
|||
| [`${componentCls}-title-content`]: { | |||
| transition: `color ${motionDurationSlow}`, | |||
|
|
|||
| '> *': { | |||
There was a problem hiding this comment.
还是感觉这样有点耦合，内部元素万一就是需要这个 lineHeight，这么改就破坏了
There was a problem hiding this comment.
还是感觉这样有点耦合，内部元素万一就是需要这个 lineHeight，这么改就破坏了
嗯嗯，那我这边再尝试修改一下~
|
https://codesandbox.io/s/ji-ben-shi-yong-antd-5-2-2-forked-90t2m9?file=/demo.js 这样呢？我觉得尽量只影响到自己更好一些。 |
|
这个 |
The approach of fixing this is destructive, so it's necessary to consider a better solution here, or reset the styles locally. |
Yuiai01
force-pushed
the
typography-style
branch
from
3f4a63f
to
375e06a
Compare
Yuiai01
changed the title
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
close #41143
💡 Background and solution
由于 Typography 设置 ellipsis 时会默认添加
vertical-align: bottom，且 Typography 具有默认行高，所以会无法垂直居中，现将Menu.Item透传，使其能垂直居中，以下是修复前后对比：修复前：
修复后：
📝 Changelog
☑️ Self-Check before Merge