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

【问题标题】：Can't seem to change the color of my SpeedDial - MUI似乎无法更改我的 SpeedDial 的颜色 - MUI
【发布时间】：2021-11-20 18:01:08
【问题描述】：

我似乎无法更改快速拨号的颜色。我的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;

【问题讨论】：

标签： javascript reactjs material-ui jss

【解决方案1】：

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

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

从版本 4 导入样式 API 时：

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

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

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

【讨论】：

【解决方案2】：

在你的 css 中编辑以下类：

.MuiSpeedDial-fab {
  background-color: red;
}

这里我将快速拨号的背景颜色从默认的蓝色更改为红色。

【讨论】：

【解决方案3】：

将 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>

【讨论】：