React MUI - Cannot Change FAB color on Hover

Question

I cannot change the colour of this FAB on hover. With these settings, color and hover's color appear disabled (all grey).

This is the code:

 const style = {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed",
    color: "primary",
    zIndex: 20,
    "&:hover": {
      color: "yellow",
    },
  };

  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <ReactFlow elements={graph} />
      <Fab aria-label="Next Level" style={style} onClick={reqNextLevel}>
        <AddIcon style={{ fill: "white" }} />
      </Fab>
    </div>
  );

Answer 1

To override the color, you need to use makeStyles, Here is the Codesandbox for that.

https://codesandbox.io/s/floatingactionbuttons-material-demo-forked-p8o85?file=/demo.js

I also attached the full code below.

import * as React from "react";
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  addButton: {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed",
    color: "primary",
    zIndex: 20,
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "yellow"
    }
  },
  addIcon: {
    fill: "white"
  }
});

export default function FloatingActionButtons() {
  const classes = useStyles();

  return (
    <Box sx={{ "& > :not(style)": { m: 1 } }}>
      <Fab aria-label="Next Level" className={classes.addButton}>
        <AddIcon className={classes.addIcon} />
      </Fab>
    </Box>
  );
}