Skip to content

fix(style): 修复按钮幽灵态 loading 与 disabled 样式优先级 #2685

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

Open
liweijie0812 wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

fix(style): 修复按钮幽灵态 loading 与 disabled 样式优先级 #2685

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efa4fce
fix(style): 修复按钮幽灵态 loading 与 disabled 样式优先级
liweijie0812 Sep 2, 2026
b36b780
fix(button): 修复幽灵禁用态颜色统一
liweijie0812 Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 19 additions & 23 deletions style/web/components/button/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,28 @@
@{attr}: @@theme-hover;
}

&:active when (@ghost = true) {
&:active when (@ghost =true) {
@{attr}: @@theme-active;
}

&.@{prefix}-is-loading when (@ghost = true) {
@{attr}: @@theme-default;
// ghost disabled 强制统一色
&.@{prefix}-is-disabled when (@ghost =true) {
@{attr}: @btn-color-ghost-disabled;
background-color: transparent;
}

&.@{prefix}-is-loading when (@ghost = false) {
&.@{prefix}-is-disabled when (@ghost =false) {
@{attr}: @@theme-disabled;
}

// ghost disabled 强制统一色
&.@{prefix}-is-disabled when (@ghost = true) {
@{attr}: @btn-color-ghost-disabled;
background-color: transparent;
// loading 时 react 端组件会同时挂载 t-is-loading 与 t-is-disabled 两个类，
// 二者选择器权重相同，按声明顺序后者生效，故本段必须置于 is-disabled 之后，
// 否则幽灵按钮 loading 时主题色会被 disabled 色覆盖
&.@{prefix}-is-loading when (@ghost =true) {
@{attr}: @@theme-default;
}

&.@{prefix}-is-disabled when (@ghost = false) {
&.@{prefix}-is-loading when (@ghost =false) {
@{attr}: @@theme-disabled;
}

Expand Down Expand Up @@ -64,11 +67,11 @@
font-size: @btn-loading-size;
}

svg + .@{prefix}-button__text:not(:empty) {
svg+.@{prefix}-button__text:not(:empty) {
margin-left: @btn-icon-text-margin-left;
}

.@{prefix}-loading + .@{prefix}-button__text:not(:empty) {
.@{prefix}-loading+.@{prefix}-button__text:not(:empty) {
margin-left: @btn-icon-text-margin-left;
}

Expand Down Expand Up @@ -275,6 +278,7 @@
.button-attr-color('danger', border-color, true);
}
}

&.@{prefix}-is-loading:not(&.@{prefix}-button--ghost) {
color: @btn-color-text;

Expand Down Expand Up @@ -450,26 +454,18 @@
--ripple-color: @btn-color-gray-bg-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-primary:not(.@{prefix}-is-disabled):not(
.@{prefix}-button--ghost
) {
.@{prefix}-button--variant-base.@{prefix}-button--theme-primary:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
--ripple-color: @btn-color-primary-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-success:not(.@{prefix}-is-disabled):not(
.@{prefix}-button--ghost
) {
.@{prefix}-button--variant-base.@{prefix}-button--theme-success:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
--ripple-color: @btn-color-success-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-warning:not(.@{prefix}-is-disabled):not(
.@{prefix}-button--ghost
) {
.@{prefix}-button--variant-base.@{prefix}-button--theme-warning:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
--ripple-color: @btn-color-warning-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-danger:not(.@{prefix}-is-disabled):not(
.@{prefix}-button--ghost
) {
.@{prefix}-button--variant-base.@{prefix}-button--theme-danger:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
--ripple-color: @btn-color-danger-active;
}