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.
Cuando el botón está deshabilitado, aparece su atributo disabled . Entonces, el selector SCSS sería el button[disabled] o, en su caso:
.button { &--secondary { &[disabled] { /* styles */ } } }Ver más: Selectores de atributos
tu css esta mal...
cuando usa atributos de datos que necesita ->
&[disabled]{ //your css. }o
&[disabled="true"]{ //your css. }