Estoy tratando de agregar un estilo deshabilitado a un componente de botón usando SCSS.

Tengo un botón que tiene múltiples clases.

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

No tengo declaraciones de importación de estilo en este archivo, pero sí tengo un buttons.scss que aplica estilo a los botones.

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

Todos mis otros estilos parecen funcionar bien, sin embargo, no puedo hacer que se apliquen los estilos deshabilitados.