Disabled button styling not applied

Question

I am trying to add disabled styling to a button component using SCSS.

I have a button that have multiple classes

<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>

I don't have any style import statements in this file but I do have a buttons.scss file which styles buttons.

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;
            }
        }
    }
}

All of my other styling seems to work fine however I cannot get the disabled styles to apply.

Answer 1

When button is disabled, its attribute disabled appears. So SCSS selector would be button[disabled] or, in your case:

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

See more: Attribute selectors

Answer 2

your css is wrong...

when you use data attributes you need ->

&[disabled]{
 //your css.
}

or

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