admin管理员组文章数量:1344238
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;
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;
4 Answers
Reset to default 10Adding FabProps to the SpeedDial ponent 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>
You're importing MUI ponents 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 ponent from v4. In v5, they switch to emotion from JSS so the ponents between 2 versions are inpatible. 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";
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.
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>
本文标签： javascriptCan39t seem to change the color of my SpeedDialMUIStack Overflow
版权声明：本文标题：javascript - Can't seem to change the color of my SpeedDial - MUI - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743701100a2524334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论