Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: dropdown menu item #39368

Closed
wants to merge 6 commits into from
Closed

fix: dropdown menu item #39368

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
08cc6c9
fix: dropdown menu item in danger
samyarkd Dec 7, 2022
30cdf7c
Merge branch 'ant-design:master' into bugfix
samyarkd Dec 9, 2022
a9e77a6
increase disabled CSS specificity
samyarkd Dec 9, 2022
6c14940
remove unnecessary changes
samyarkd Dec 9, 2022
b3655b1
Merge branch 'ant-design:master' into bugfix
samyarkd Dec 15, 2022
b9e5c30
fix: remove reordering functions
samyarkd Dec 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
{...rest}
className={classNames(
{
[`${prefixCls}-item-danger`]: danger,
[`${prefixCls}-item-danger`]: this.props.disabled ? false : danger,
[`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,
Copy link
Member

@Wxh16144 Wxh16144 Dec 7, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can solve the problem here by increasing the css selector weights.

v4.x

ant-design/components/dropdown/style/index.less

Lines 224 to 226 in f4d0116

&-disabled {
color: @disabled-color;
cursor: not-allowed;

v5.x

ant-design/components/dropdown/style/index.tsx

Lines 350 to 352 in 122b3f1

'&-disabled': {
color: colorTextDisabled,
cursor: 'not-allowed',

what do you think?

-      &-disabled {
+      &&-disabled {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

I tried this out in version 5x, but it didn't work out.
It will break the disable option as shown in below (Image-1). But yes this is much cleaner and better i guess but i couldn't make it i tried a few more ways of increasing the CSS specificity, but they didn't work.

Image-1

code-1

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about adding !important statement to color and background-color ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of !important is bad, in 5.x it can be changed to this

 
-            '&-disabled': {
+            [`&${menuCls}-item-disabled`]: {
               color: colorTextDisabled,

and switch the order of returns

     return [
+      genStatusStyle(dropdownToken),
       genBaseStyle(dropdownToken),
       genButtonStyle(dropdownToken),
-      genStatusStyle(dropdownToken),
     ];

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is just my suggestion, still need official help to review @afc163

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wxh16144's suggestion is what I think too.

},
className,
Expand Down