似乎无法更改我的 SpeedDial - MUI 的颜色

Question

我似乎无法更改快速拨号的颜色。我makeStyle已经完成了其他所有工作。有任何想法吗？

import React, {useContext} from 'react';
import {AppBar, Box, Button, Container, makeStyles, Toolbar, Typography} from "@material-ui/core";
import LoginButton from "../Misc/LoginButton";
import LogoutButton from "../Misc/LogoutButton";
import {UserContext} from "../Misc/UserContext";
import {SpeedDial, SpeedDialAction} from "@mui/material";
import MenuIcon from '@mui/icons-material/Menu';

const useStyles = makeStyles((theme?: any) => ({
    title: {
        background: theme.palette.primary.main,
        color: theme.palette.text.primary,
        paddingLeft: '64px'
    },
    rightToolbar: {
        marginLeft: "auto",
        marginRight: 0
    },
    appBar:{
        height: '60px',
        position: 'relative'

    },
    speeddial:{
        color: theme.palette.secondary.main,
        overflow: 'visible',
    }
}));

const AppbarTop: React.FC<{[key:string]: any}> = () => {
    const classes = useStyles();
    const actions = [
        { icon: <MenuIcon />, name: "Copy" },
        { icon: <MenuIcon />, name: "Save" },
        { icon: <MenuIcon />, name: "Print" },
        { icon: <MenuIcon />, name: "Share" }
    ];

    let {loggedIn:loggedIn} = useContext(UserContext);



    return(
        <>
            <AppBar position="static" className={classes.appBar}>
                <Toolbar>


                    {/*test speed dial*/}
                    <SpeedDial
                        ariaLabel="SpeedDial playground example"
                        icon={<MenuIcon/>}
                        direction='down'
                        sx={{ position: 'absolute', top: 0, left: 0}}
                    >
                        {actions.map((action) => (
                            <SpeedDialAction
                                key={action.name}
                                icon={action.icon}
                                tooltipTitle={action.name}
                                sx={{color:'primary.main'}}
                                className={classes.speeddial}
                            />
                        ))}
                    </SpeedDial>




                    <Typography variant="h6" className={classes.title}>
                        Moons Meds {'>'}:)
                    </Typography>
                    <Container maxWidth="lg"> {/*temporary testing buttons*/}
                        <Button color="inherit" onClick={() => { window.location.href = "/" }}>home</Button>
                        <Button color="inherit" onClick={() => { window.location.href = "/CalendarOverview" }}>CalendarOverview</Button>
                        <Button color="inherit" onClick={() => { window.location.href = "/Err" }}>Error page (testing right now)</Button>
                        <Button color="inherit" onClick={() => { window.location.href = "/MedicationPage" }}>Medication page</Button>

                        <Button color="inherit" onClick={() => { console.log(loggedIn)}}>console.log</Button>
                    </Container>
                    <Box className={classes.rightToolbar}>
                        {loggedIn ? <LogoutButton/>:<LoginButton/>}
                    </Box>
                </Toolbar>
            </AppBar>
        </>
    )

};

export default AppbarTop;

Answer 1

将 FabProps 添加到 SpeedDial 组件对我有用：

<SpeedDial
  ariaLabel="Speed dial with car options"
  sx={{
    position: 'fixed',
    bottom: 16,
    right: 16,
  }}
  icon={<SpeedDialIcon icon={<DirectionsCarIcon />} />}
  onClose={handleClose}
  onOpen={handleOpen}
  open={open}
  hidden={!data}
  FabProps={{
    sx: {
      bgcolor: 'secondary.main',
      '&:hover': {
        bgcolor: 'secondary.main',
      }
    }
  }}
>
...
</SpeedDial>

Answer 2

您正在从版本 5 导入 MUI 组件：

import {SpeedDial, SpeedDialAction} from "@mui/material";

从版本 4 导入样式 API 时：

import { makeStyles } from "@material-ui/core";

makeStylesv4 中的组件仅适用于 v4 中的组件。在 v5 中，他们从 JSS 切换到情感，因此两个版本之间的组件不兼容。因为SpeedDial您导入的是v5，所以要解决该问题，您还需要makeStyles从@mui/material包导入。

import { makeStyles } from "@mui/material/styles";