Javascript 禁用的按钮不'；如果指定了文本颜色，则不能在React JS中工作

我想指定按钮的样式（背景和文本颜色），稍后在代码中禁用。 及

我的代码是

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>
  );
}

链接到

---

当我指定文本的颜色（白色）禁用时，不会将颜色更改为灰色（按钮看起来不禁用），当未定义文本颜色时，它是黑色的，单击后它是灰色的。有没有办法在单击之前将文本颜色定义为白色，在单击按钮时将颜色更改为灰色？因为我需要在渲染时使用蓝色背景和白色文本制作按钮。感谢所有帮助我的人。

这大部分都可以通过CSS完成，不过您还需要在React组件中添加一项内容

JS:

---

编辑：您也可以使用：enabled和：disabled伪选择器，如上述注释。

您应该详细说明当按钮处于活动状态时设置颜色的

：enabled

选择器，或者在禁用时为颜色指定

：disabled

选择器，例如，通过：@Icepickle，非常感谢，成功了！真不敢相信我被这么简单的事情困住了）

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

.btn:hover {
  cursor: pointer;
}

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${loading ? ' disabled' : ''}`}>
        {" "}
        Click me
      </button>
    </div>
  );
}

.btn {
  width: 200px;
  height: 50px;
  background-color: blue;
  /* color: white; */
}
.btn.disabled {
  opacity: .65;
  pointer-events: none;
}
.btn:hover {
  cursor: pointer;
}
.btn:active {
  color: green; // Or whatever style you want
}