The styling for a disabled button is not correct on an submit button in React-CodePudding

Newbie at React here. I'm not sure that I have the syntax right for CSS styling on a button. Basically, the button should be disabled until the user puts a value in. I think I have the correct syntax because nothing saves unless there's at least one character. However, I wanted the button to be greyed out (I have made it red at the moment to make it obvious to me to see if it was working) but it's remaining black and the pointer is still showing. The useState is true for [[isDisabled, setIsDisabled] - is that the correct thing to do? I'm not sure that my CSS is correct.

import { useState, useContext } from "react";
import { RiSave2Line } from "react-icons/ri";

import HandleAddContext from "./UseContext/HandleAddContext";

const AddNote = () => {
  const handleAddNote = useContext(HandleAddContext);

  const [addText, setAddText] = useState("");
  const [isDisabled, setIsDisabled] = useState(true);

  const characterLimit = 300;

  //handle text input
  const handleChange = (e) => {
    if (characterLimit - e.target.value.length < 1) {
      setIsDisabled(true);
      console.log(setIsDisabled);
    } else {
      setIsDisabled(false);
      console.log(e.target.value);
      setAddText(e.target.value);
    }
  };

  //handle save & error
  const handleSaveClick = () => {
    if (addText.trim().length > 0) {
      handleAddNote(addText);
      setAddText("");
    }
  };

  return (
    <form className="note new">
      <textarea
        rows="8"
        cols="10"
        placeholder="Type here to add a note..."
        value={addText}
        onChange={handleChange}
      />

      <div className="note-footer">
        <p className="note-footer-text">
          {characterLimit - addText.length} characters remaining
        </p>
        <RiSave2Line
          onClick={handleSaveClick}
          id="button"
          type="submit"
          disabled={isDisabled}
          className="note-footer-save"
        />
      </div>
    </form>
  );
};

export default AddNote;

And here is the CSS snippet:

:is(.note-footer-icon, .note-footer-save) {
  font-size: 1.3rem;
}

:is(.note-footer-icon:hover, .note-footer-save:hover) {
  cursor: pointer;
  color: #838383;
}
.note-footer-save:disabled {
  color: rgb(181, 16, 16);
  cursor: default;
}

CodePudding user response：

I would add a class like this:

<RiSave2Line
          onClick={handleSaveClick}
          className= {isDisabled && 'disabledClass'}
          id="button"
          type="submit"
          disabled={isDisabled}
          className="note-footer-save"
        />

Also remember to make your CSS reachable by the component.