Styling for inactive buttons not being implemented

I'm having trouble applying disabled styling to a button component using SCSS.

The button has 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>

There are no style import statements in this file, but there is a buttons.scss file that 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 other styling works correctly, but the disabled styles are not being applied.

javascriptcsssass

Answer №1

When the button is inactive, it will display the attribute disabled. This means that the SCSS selector should target button[disabled], as shown below:

.button {
    &--inactive {
        &[disabled] {
            /* add styles here */
        }
    }
}

To learn more about this concept, visit: Attribute selectors

Answer №2

Uh oh, looks like your CSS needs some fixing...

Remember, when using data attributes, you should include:

&[disabled]{
 //your styles here.
}

Alternatively, you can also use:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate PNG files with pre-defined labels in a React element

In my application, there is a collection of PNG images with filenames consisting of only 2 letters like aa.png, ab.png, ac.png, and so on. Additionally, there is an API endpoint that retrieves an array of objects with a property "name" containing 3 letter ...

javascriptreactjsreact-hooksmaterial-ui

Associating functions with events within objects

I am encountering a unique issue with jQuery and JavaScript in general. Currently, I am developing a JS file that allows me to create portlets for a client's website. I am utilizing SignalR to send updates to the users. The code snippet below is cau ...

javascriptjquerysignalr

Creating a mesmerizing display of moving cubes using three.js

I am attempting to reproduce a specific effect showcased in the following link: In my current project, I have multiple cubes positioned in 3D space along the x and z axis with loops. However, I am struggling to animate them in a precise order. My idea is ...

javascriptanimationthree.js

Here's the proper method to execute this in JavaScript

Hello everyone, thank you for stopping by. I'm trying to figure out the correct way to achieve the following: <script language="javascript"> function flag(nation) { this.nation=nation; document.getElementById("flag").innerHTML="<img src=&ap ...

javascript

Is it possible to incorporate both Bootstrap 3 and Bootstrap 4 within the same HTML file for separate div elements on a webpage? If so, what is the best way to achieve this?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Bootstrap 3 and Bootstrap 4 in the Same HTML File</title> </head> <body> <div class="bootstrap3"> Some code her ...

htmlcsstwitter-bootstrapbootstrap-4

Paused session in web development

Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...

htmlcssclass

What is the trick to concealing a div on a webpage through the addition of a designated parameter to the URL?

As a newbie blogger delving into the world of HTML, my knowledge of JavaScript is quite limited. I am eager to find out how I can hide any div on a webpage simply by adding a parameter to the URL; for example, if I were to add ?hide=header-wrapper at the e ...

javascriptjqueryhtmlcsshide

Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...

javascripthtmlcssreactjs

What is the best way to make a table expand upwards when adding rows dynamically?

Is there a way to dynamically grow a table upwards from a fixed position instead of downwards? For example, if the first table row is at 100px, can the next one be at 110px? I'm looking for a solution to achieve this effect when adding table rows dyna ...

jqueryhtmlcss

Is there a way to adjust the parameters of objects within my scene that were loaded using OBJMTLLoader?

I am working on a scene that includes 3 cubes and a DAT.GUI menu. My goal is to switch any cube to wireframe mode when it is selected in the menu individually. Although my code is successful for 2 out of the 3 cubes, I am facing an issue where the first c ...

javascriptthree.jsmeshdat.gui

Vue Deep Watcher fails to activate when the data is altered

While the countdown timer is functioning properly, it seems that the deep watcher is not working as expected. Despite attempting to log the new value of seconds in the console, it does not display anything even though the countdown timer continues to funct ...

javascriptnode.jstypescriptvue.jsweb

Utilizing the invoke() method within the each() function in Cypress to access the href attribute

I recently started using Cypress and I'm attempting to retrieve the href attribute for each div tag within a group by utilizing invoke(), however, it is resulting in an error. Could anyone provide guidance on the correct way to achieve this? cy.get(&a ...

javascriptvue.jscypress

Press the option "Switch to red button" in order to transform the text color to red, and then revert back to its initial color

I am trying to implement a feature where the "convert to red button" changes the text to red in the preview paragraph, and then reverts back to the primary color according to the theme - black in the light theme, white in the blue and black background them ...

javascriptreactjsreact-hooks

The Next.js client-side JavaScript application experiences unforeseen disruptions without generating any console errors

My server is responsible for constructing HTML from a JSON response: { content: "<div id=\"_next\">...</div>...<script src=\"...\"></script>" } This is how my Node server handles the data: const output = "&l ...

javascriptreactjsservernext.js

Creating a single factory that consolidates multiple return statements

Exploring the ins and outs of AngularJS, I find myself eager to learn how to effectively combine two factory modules. Specifically, I am interested in merging the following two: // Factory Module One services.factory('UserService', function ($re ...

javascriptangularjsrest

Is there a way for me to pinpoint the location of an error in React?

Currently, I am operating a basic React application with webpack in development mode by using the following command: webpack -w --mode development --config ./webpack.config.js This setup ensures that my code remains unminified. However, I am encounterin ...

javascriptreactjswebpack

"The changes made to the list are not being accurately displayed by Angular's ng

I am working on a directive that injects dynamic templates during ng-repeat. While I can successfully add items to the list, they do not appear in the view for some reason. It seems like I am missing a crucial piece to make it work correctly. You can find ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

The sequence of methods firing seems to be jumbled up

My attempt to utilize JSON for returning an array that can be manipulated later is encountering some issues when using AJAX to return a JSON encoded string. When debugging with alerts, it seems like the alerts are firing in the incorrect order. Check out ...

javascriptjqueryajaxjson

Embedding a table inside a Bootstrap popover

I'm struggling with adding a table inside a Bootstrap popover. When I click on it, the table doesn't show up. This is my first time trying to insert HTML into a popover, so I don't know the correct way to do it. Any help would be appreciated ...

javascripttwitter-bootstrappopover