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.
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
your css is wrong...
when you use data attributes you need ->
&[disabled]{
//your css.
}
or
&[disabled="true"]{
//your css.
}