Changing Button Background Color Conditionally in Material UI

Question

i got a button that the its background color suppose to change base on state condition , green color for correct , and red for incorrect , so i just made three different css classes , all have similar attributes except the background color , classes changes base on a state with the optionBt class as a default value , how to add an interpolation to optionBt backgroundColor so i only have one class for this button?

const useStyles = makeStyles({
optionBt: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
  },

optioncorrect: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
      backgroundColor: "green",
  },

optionuncorrect: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
      backgroundColor: "red",
  },
 },
  },

const QuestionOptions = ({ country, correctness }) => {
  const classes = useStyles();
  const [myColor, setMyColor] = useState(classes.optionBt);

return (
    <Box className={myColor}>
      <Button
        variant="contained"
        onClick={() => {
          changeColor();
        }}
      >
        {country}
      </Button>
    </Box>
  );
};

Answer 1

If you want only one class you can do :

const useStyles = makeStyles({
optionBt: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
  },

optioncorrect: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
      backgroundColor: "green",
  },

optionuncorrect: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
      backgroundColor: "red",
  },
 },
  },

const QuestionOptions = ({ country, correctness }) => {
  const classes = useStyles();
  const [myColor, setMyColor] = useState(classes.optionBt);
  // set state for true false condition
  [correctOrNot, setCorrectOrNot] = useState(null)

return (
    <Box className={myColor}>
      <Button
        variant="contained"
        onClick={() => {
          // if correct set to true or false is uncorrect
          setCorrectOrNot(true);
          setsetMyColor(correctOrNot ? classes.optioncorrect : classes.optionuncorrect);
        }}
      >
        {country}
      </Button>
    </Box>
  );
};

Answer 2

const style={
    button: {
      width: "80%",
      color: "#fff",
      height: "2.5rem",
      marginTop: "0.5rem",
      borderRadius: "05%",
      border: "2px solid #555",
      cursor: "pointer",
      '&:[is-correct="true"]'{
         backgroundColor: "green"
      },
      '&:[is-correct="false"]'{
         backgroundColor: "red"
      }
    }
}

const QuestionOptions = ({ country, correctness }) => {
  
  // set state for true false condition
  [isCorrect, setIsCorrect] = useState(undifind)

return (
    <Box 
      <Button
        is-correct={isCorrect === true ? 'true': isCorrect === false ? 'false':undifind}
        className={style.button}
        variant="contained"
        onClick={() => {
          // if correct set to true or false is uncorrect
          setIsCorrect(true);
        }}
      >
        {country}
      </Button>
    </Box>
  );
};