未应用禁用的按钮样式[重复]答案

【问题标题】：Disabled button styling not applied [duplicate]未应用禁用的按钮样式[重复]
【发布时间】：2022-02-15 01:15:53
【问题描述】：

我正在尝试使用 SCSS 为按钮组件添加禁用样式。

我有一个包含多个类的按钮

<button
  className="button button--size-short-wide button--secondary"
  data-cy="letters-compose-message-content-add-photo-button"
  onClick={onClickOpenImageLoad}
  disabled={true}
>
   ADD PHOTO
</button>

我在这个文件中没有任何样式导入语句，但我有一个用于设置按钮样式的 buttons.scss 文件。

buttons.scss

.button {
    @include font-rubik(16px, false, 600);
    padding: 16px 24px;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease-out;
    text-decoration: none !important;

    &--secondary {
        border: 2px solid $blue-darkerer;
        background-color: transparent;
        color: $blue-darkerer;
        text-transform: uppercase;

        &.disabled {
            border: 2px solid $gray-light !important;
            color: $gray-light !important;
            cursor: not-allowed !important;
        }
    }

    &--size {
        &-big {
            height: 64px;
            padding: 16px 0;
        }

        &-short {
            padding: 8px 24px;

            &-wide {
                padding: 8px 48px;
            }
        }

        &-small {
            height: 45px;
            width: 45px;
            border-radius: 6px;
            padding: 0 0 0 9px;
        }
        &--apple {
            &-small {
                height: 45px;
                width: 45px;
                border-radius: 6px;
                padding: 0 0 0 0px;
            }
        }
    }
}

我的所有其他样式似乎都可以正常工作，但是我无法应用禁用的样式。

【问题讨论】：

标签： javascript css sass

【解决方案1】：

当按钮被禁用时，其属性disabled 出现。所以 SCSS 选择器将是 button[disabled] 或者，在你的情况下：

.button {
    &--secondary {
        &[disabled] {
            /* styles */
        }
    }
}

查看更多：Attribute selectors

【讨论】：

【解决方案2】：

你的 css 错了……

当你使用你需要的数据属性时 ->

&[disabled]{
 //your css.
}

或

&[disabled="true"]{
  //your css.
}

【讨论】：