Can't seem to change the color of my SpeedDial - MUI

Question

I can't seem to change the color of my speed dial. my makeStyle has worked on everything else. Any ideas?

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;

Dulcinea

Answer 1

Adding FabProps to the SpeedDial component worked for me:

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

Burr

Answer 2

You're importing MUI components from version 5:

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

While importing the style API from version 4:

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

makeStyles from v4 only works with the component from v4. In v5, they switch to emotion from JSS so the components between 2 versions are incompatible. Because the SpeedDial you import is from v5, to fix the problem, you also need to import makeStyles from @mui/material package.

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

Derrek

Answer 3

In your css edit the following class:

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

Here I changed the speed dial background color from default blue to red.

Kumler

Answer 4

Us FabProps={{ color: "secondary" }} like the following code:

<SpeedDial
            ariaLabel="SpeedDial tooltip example"
            sx={{ position: "fixed", bottom: 80, right: 10 }}
            icon={<SpeedDialIcon />}
            onClose={() => setOpen(false)}
            onOpen={() => setOpen(true)}
            open={open}
            FabProps={{ color: "secondary" }}
        >
...
</SpeedDial>

Whited