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

Posted 2023-02-18

【中文标题】React MUI - 无法在悬停时更改 FAB 颜色

【英文标题】：React MUI - Cannot Change FAB color on Hover

【发布时间】：2022-01-23 18:56:06

【问题描述】：

我无法在悬停时更改此 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>
  );

【参考方案1】：

要覆盖颜色，需要使用makeStyles， 这是代码沙盒。

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

【讨论】：

不，实际上我正在尝试更改工厂的背景颜色

更新了代码。

嘿，现在当你悬停时它会改变，但你有没有注意到当你没有在它上面时你不能给它默认的背景颜色？

我不确定你在说什么，但我更新了代码。在当前示例中，其默认颜色为红色，悬停时为黄色。