Disabled button doesn't work in React JS if text color is specified

I would like to specify style(background and text color) of the button that will be disabled later in code.
button needs to look like this on render and like this after click

My code is

import React, { useState, useEffect } from "react";

import "./styles.css";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setLoading(true);
  };
  return (
    <div className="App">
      <button disabled={loading} onClick={handleClick} className="btn">
        {" "}
        Click me
      </button>
    </div>
  );
}

and Css

.btn {
  width: 200px;
  height: 50px;
  background-color: blue;
  /* color: white; */
}

.btn:hover {
  cursor: pointer;
}

link to codesandbox

When I specify color of the text(white) disabled doesn’t change color to grey( button doesn’t look disabled), when text color is not defined, it’s black and after click it’s grey. Is there any way to define text color as white before click, and when button is clicked change color to grey? Because I need to make the button with blue background and white text on render. Thank you anyone who will help me.

100 thoughts on “Disabled button doesn't work in React JS if text color is specified”

Leave a Comment