React MUI - 悬停时无法更改 FAB 颜色

Question

我无法在悬停时更改此 FAB 的颜色。使用这些设置，颜色和悬停的颜色显示为禁用（全灰色）。

这是代码：

 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

要覆盖颜色，您需要使用 makeStyles， 这是 Codesandbox。

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

我还在下面附上了完整的代码。

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