diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap index 93756e3796c2..82a4633ea7b5 100644 --- a/components/select/__tests__/__snapshots__/demo.test.js.snap +++ b/components/select/__tests__/__snapshots__/demo.test.js.snap @@ -1089,112 +1089,223 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = ` `; exports[`renders ./components/select/demo/multiple.md correctly 1`] = ` -, +
, + + + , +] `; exports[`renders ./components/select/demo/optgroup.md correctly 1`] = ` diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index 30c9bf3bead3..7f56fb0e375e 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -28,15 +28,28 @@ function handleChange(value) { } ReactDOM.render( - , + <> + +
+ + , mountNode, ); ``` diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index b17fef7af3fd..3a7f1d02184c 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -30,6 +30,11 @@ cursor: text; } + .@{select-prefix-cls}-disabled& { + background: @select-multiple-disabled-background; + cursor: not-allowed; + } + &::after { display: inline-block; width: 0; @@ -64,6 +69,12 @@ transition: font-size 0.3s, line-height 0.3s, height 0.3s; user-select: none; + .@{select-prefix-cls}-disabled& { + color: @select-multiple-item-disabled-color; + border-color: @select-multiple-item-disabled-border-color; + cursor: not-allowed; + } + // It's ok not to do this, but 24px makes bottom narrow in view should adjust &-content { display: inline-block; diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less index 2a5b427abf8d..55c59ec50dcc 100644 --- a/components/style/themes/dark.less +++ b/components/style/themes/dark.less @@ -273,6 +273,9 @@ @select-clear-background: @component-background; @select-selection-item-bg: fade(@white, 8); @select-selection-item-border-color: @border-color-split; +@select-multiple-disabled-background: @component-background; +@select-multiple-item-disabled-color: #595959; +@select-multiple-item-disabled-border-color: @popover-background; // Cascader // --- diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 265cdd30e68f..3f07a58a580e 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -433,6 +433,9 @@ @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px @select-multiple-item-height-lg: 32px; @select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); +@select-multiple-disabled-background: @input-disabled-bg; +@select-multiple-item-disabled-color: #bfbfbf; +@select-multiple-item-disabled-border-color: @select-border-color; // Cascader // ---