I am using material-ui. There are two toolbars where the second toolbar want to have transparent background
I followed this, Transparent AppBar in material-ui (React) but its for AppBar component and not working for Toolbar
My Code :
Theme Fie :
const MuiTheme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
mixins: {
toolbar: {
backgroundColor: "transparent",
},
},
});
Toolbar File
const toolbarStyles = makeStyles((theme) => ({
toolbar: {
backgroundColor: theme.mixins.toolbar.backgroundColor,
},
}));
<AppBar position="static" style={{ boxShadow: "none" }}>
<Toolbar className="toptoolBar">
{/* */}
</Toolbar>
<div style={{ backgroundColor: "transparent" }}>
<Toolbar
style={{ backgroundColor: "transparent" }}
classes={{ root: toolbarSt.toolbar }}
>
{/* */}
</Toolbar>
</div>
</AppBar>
if you want to make only a certain number of toolbar style changes, then doing it in the theme file is not recommended. Instead, use the makeStyles
export default function App() {
const classes = useStyles();
return (
<AppBar position="static" style={{ boxShadow: "none" }}>
<Toolbar classes={{root:classes.greenToolbar}} className="toptoolBar" >
Green
</Toolbar>
<div style={{ backgroundColor: "transparent" }}>
<Toolbar
classes={{ root: classes.transparentToolbar }}>
transparent
</Toolbar>
</div>
</AppBar>
);
}
const useStyles = makeStyles((theme) => ({
transparentToolbar: {
backgroundColor: "transparent",
color: "red"
},
greenToolbar:{
backgroundColor:'green'
}
}));
Here is the working demo :
Related
On this MUI AppBar/Drawer sample, I have added a MUI Menu to edit profile, with an anchor on a div. It's located on the top right corner. I like to be able to click on the username or the profile icon to pop the menu out. For some reason the menu never disappear. I have try to add console.log in the callbacks. It shows the open callback is called right after the close one. Can someone explain why and how to close the menu ?
Here is my code, and the full project on Codesandbox :
import React from "react";
import Box from "#mui/material/Box";
import Grid from "#mui/material/Grid";
import IconButton from "#mui/material/IconButton";
import Menu from "#mui/material/Menu";
import MenuIcon from "#mui/icons-material/Menu";
import MenuItem from "#mui/material/MenuItem";
import Toolbar from "#mui/material/Toolbar";
import AccountCircle from "#mui/icons-material/AccountCircle";
import { styled } from "#mui/material/styles";
import { useNavigate } from "react-router-dom";
export default function TopBar(props) {
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleMenuOpen = (event) => {
console.log("set menu open");
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
console.log("set menu close");
setAnchorEl(null);
};
const UserName = styled("div")(({ theme }) => ({
fontSize: "1em",
marginRight: "0.7em",
display: "inline",
height: "100%",
textAlign: "center",
cursor: "pointer"
}));
const Logo = styled("img")(({ theme }) => ({
height: "42px",
width: "42px",
backgroundColor: "#FFF",
marginRight: "0.7em"
}));
return (
<Toolbar>
<Grid
style={{ justifyContent: "space-between", alignItems: "center" }}
container
>
<Grid item style={{ display: "inline-flex", alignItems: "center" }}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={props.handleDrawerOpen}
edge="start"
sx={{
...(props.drawerOpen && {
display: {
xs: "block",
sm: "none"
}
})
}}
>
<MenuIcon />
</IconButton>
</Grid>
<Grid item style={{ display: "inline-flex", alignItems: "center" }}>
<Logo
src=""
alt="logo"
onClick={() => {
props.handleDrawerClose();
navigate("/");
}}
/>
<Box
sx={{
whiteSpace: "nowrap",
fontSize: { xs: "1em", sm: "1.25em" },
fontWeight: { xs: 400, sm: 500 }
}}
>
Toolbar test
</Box>
</Grid>
<Grid item style={{ display: "flex", alignItems: "center" }}>
<div
style={{ display: "inline-flex", alignItems: "center" }}
onClick={handleMenuOpen}
>
<UserName sx={{ display: { xs: "none", sm: "block" } }}>
{props.userName}
</UserName>
<IconButton
color="inherit"
aria-label="user"
edge="start"
size="large"
>
<AccountCircle />
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem
onClick={() => {
props.handleDrawerClose();
navigate("/test");
}}
>
My Profile
</MenuItem>
<MenuItem
onClick={() => {
props.handleDrawerClose();
navigate("/logout");
}}
>
Logout
</MenuItem>
</Menu>
</div>
</Grid>
</Grid>
</Toolbar>
);
}
You somehow managed that when you trigger the onClose event, you are simultaneously triggering handleMenuOpen function. I would suggest you use a button base to handle opening the menu.
Something like this:
<ButtonBase onClick={handleMenuOpen}>
<UserName sx={{ display: { xs: "none", sm: "block" } }}>
{props.userName}
</UserName>
<AccountCircle />
</ButtonBase>
And dont forget to remove the onClick event from your div.
You can also take a look of the fork that i made.
I wish to remove all the styles from my main component.
All the JS style of the material UI is on the same file and it is starting to get long code.
I wish to create a new file that contains all the styles on other file and on Navbar.js I will just call the components, just same as CSS file that I call to class
import styled from "#emotion/styled";
import { Notifications, Pets } from "#mui/icons-material";
import {
AppBar,
Avatar,
Badge,
Box,
InputBase,
Menu,
MenuItem,
Toolbar,
Typography,
} from "#mui/material";
import MailIcon from "#mui/icons-material/Mail";
import React, { useState } from "react";
const StyledToolbar = styled(Toolbar)({
display: "flex",
justifyContent: "space-between",
});
const Search = styled("div")(({ theme }) => ({
backgroundColor: "white",
padding: "0 10px",
borderRadius: theme.shape.borderRadius,
width: "40%",
}));
const Icons = styled(Box)(({ theme }) => ({
display: "none",
gap: "20px",
alignItems: "center",
[theme.breakpoints.up("sm")]: {
display: "flex",
},
}));
const UserBox = styled(Box)(({ theme }) => ({
display: "flex",
gap: "10px",
alignItems: "center",
[theme.breakpoints.up("sm")]: {
display: "none",
},
}));
const Navbar = () => {
const [open, setOpen] = useState(false);
return (
<AppBar position="sticky">
<StyledToolbar>
<Typography variant="h6" sx={{ display: { xs: "none", sm: "block" } }}>
PALSAM
</Typography>
<Pets sx={{ display: { xs: "block", sm: "none" } }} />
<Search>
<InputBase placeholder="search..." />
</Search>
<Icons>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
<Notifications />
</Badge>
<Avatar
sx={{ width: 30, height: 30 }}
src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
onClick={(e) => setOpen(true)}
/>
</Icons>
<UserBox onClick={(e) => setOpen(true)}>
<Avatar
sx={{ width: 30, height: 30 }}
src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
/>
<Typography variant="span">Jhon</Typography>
</UserBox>
</StyledToolbar>
<Menu
id="demo-positioned-menu"
aria-labelledby="demo-positioned-button"
open={open}
onClose={(e) => setOpen(false)}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
</AppBar>
);
};
export default Navbar;
You can create a new js file and add export before each const then you can import them from that file
export const StyledToolbar = styled(Toolbar)({
display: "flex",
justifyContent: "space-between",
});
I used the Material UI API for Drawer (found here) to create a sidebar component. However, when I render this component on a screen along with other components, it is displayed under the other components as shown below :
I tried to add an elevation property, hoping it would resolve the issue, but that didn't work. Is there a way to overcome this? Here is the code:
const drawerWidth = '224px';
interface propsDashBoard {
itemsBeforeDivider: ItemData[];
}
interface ItemData {
name: string;
Icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
routeAddress: string;
}
const history = createBrowserHistory();
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
position: 'relative',
backgroundColor: COLOR.NEUTRAL.WHITE,
},
drawer: {
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0,
position: 'absolute',
zIndex: -1,
boxShadow: '0px 1px 1px red',
},
},
appBar: {
[theme.breakpoints.up('sm')]: {
//width: `calc(100% - ${drawerWidth}px)`,
margin: '0px',
backgroundColor: COLOR.NEUTRAL.WHITE,
// position: 'absolute',
boxShadow:'0px 1px 0px #DBE1E7',
},
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
display: 'none',
backgroundColor: COLOR.NEUTRAL.WHITE,
},
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
paddingLeft: '33px',
},
content: {
flexGrow: 1,
},
cssBaseline: {
boxShadow:'none',
},
navBar: {
backgroundColor: COLOR.NEUTRAL.WHITE,
},
}));
const MyDrawer =(props: propsDashBoard) => {
const {
itemsBeforeDivider,
} = props;
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
<Router history={history}>
<nav className={classes.drawer} aria-label="mailbox folders">
<Drawer
variant="temporary"
anchor ={theme.direction === 'rtl' ? 'right' : 'left'}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
<div>
<div className={classes.toolbar} />
<Divider />
<List>
{itemsBeforeDivider.map(({name, Icon, routeAddress}) => (
<ListItem button key={name} component={Link} to={routeAddress}>
<ListItemIcon><Icon /></ListItemIcon>
<ListItemText primary={name} />
</ListItem>
))}
</List>
<Divider />
</div>
</Drawer>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
<div>
<div className={classes.toolbar} />
<Divider />
<List>
{itemsBeforeDivider.map(({name, Icon, routeAddress}) => (
<ListItem button key={name} component={Link} to={routeAddress}>
<ListItemIcon><Icon /></ListItemIcon>
<ListItemText primary={name} />
</ListItem>
))}
</List>
<Divider />
</div>
</Drawer>
</Hidden>
</nav>
</Router>
);
}
const WhiteTypography = withStyles({
root: {
backgroundColor: COLOR.NEUTRAL.WHITE,
variant:"h6",
noWrap:"true",
}
})(Typography);
function DashBoard (props: propsDashBoard) {
const {
itemsBeforeDivider,
} = props;
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
<div className={classes.root}>
<CssBaseline classes={classes.cssBaseline} />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<MyDrawer itemsBeforeDivider={itemsBeforeDivider}/>
</div>
);
}
You can trying giving drawerWidth value like 150 or so and don't give value in pixel.
I want to change(reduce) the default height of the toolbar from Material-UI
I already referred How do I change the Material UI Toolbar height? still I'm facing the problem
The thing is when I am increasing beyond like 50 , I can see changes. But when I want to decrease the height I am unable to.
How can I achieve this?
My Code :
const useStyles = makeStyles((theme) => ({
root: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
},
minHeight: {
minHeight: "20px !important",
},
}));
const AppHeader = () => {
const toolbarSt = useStyles();
return (
<>
<AppBar position="static">
<Toolbar
className={toolbarSt.minHeight}
classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
>
<Typography> Home </Typography>
<Typography> About </Typography>
</Toolbar>
</AppBar>
</>
);
};
This is due to the font size of <Typography> Home </Typography> and
<Typography> About </Typography> for exemple if you add style class to both Typography like this:
const useStyles = makeStyles((theme) => ({
root: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
},
minHeight: {
minHeight: "5px !important",
},
smallTypo:{
fontSize:"5px"
}
}));
const AppHeader = () => {
const toolbarSt = useStyles();
return (
<>
<AppBar position="static">
<Toolbar
className={toolbarSt.minHeight}
classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
>
<Typography className={toolbarSt.smallTypo}> Home </Typography>
<Typography className={toolbarSt.smallTypo}> About </Typography>
</Toolbar>
</AppBar>
</>
);
};
you can make a really small AppBar.
here a codeSandeBox
You should set the minHeight property to the root element
const useStyles = makeStyles((theme) => ({
root: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
minHeight: "20px"
}
}));
const AppHeader = () => {
const toolbarSt = useStyles();
return (
<>
<AppBar position="static">
<Toolbar classes={{ root: toolbarSt.root }}>
<Typography> Home </Typography>
<Typography> About </Typography>
</Toolbar>
</AppBar>
</>
);
};
Please refer to the docs for more information https://material-ui.com/api/toolbar/#toolbar-api
just put sx={{ height : '70px }} in appbar for some reason it is not working in toolbar but works on appbar
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
);
};
I'm using the material-ui and material-ui icons for my react project. I'm in new in react.
Can someone please guide me how to make icons with label? I want to place the label just below the icon. For example, text "Home" written under "Home Icons". I'm trying to implement something similar to what Microsoft Team has implemented in sidebar navigation (web version)
I read the API, and I found there's a prop Component. I try to experiment, however, whenever I'm using it icons disappear.
Please visit this link https://codesandbox.io/s/material-demo-forked-nohsm?file=/demo.js I'm getting this result:
Here's my code
import React from "react";
import AppBar from "#material-ui/core/AppBar";
import Drawer from "#material-ui/core/Drawer";
import { makeStyles, useTheme } from "#material-ui/core/styles";
import NotificationsIcon from "#material-ui/icons/Notifications";
import { ListItem, Toolbar } from "#material-ui/core";
import List from "#material-ui/core/List";
import ListItemIcon from "#material-ui/core/ListItemIcon";
const drawerWidth = 72;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
drawer: {
width: drawerWidth,
alignItems: "center",
justifyContent: "center",
paddingTop: theme.spacing(5)
},
drawerPaper: {
width: drawerWidth
}
}));
export default function Demo() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed" color="primary">
<Toolbar></Toolbar>
</AppBar>
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
className={classes.drawer}
>
{/* <NotificationsIcon size="large" /> */}
<List>
<ListItem>
<ListItemIcon>
<NotificationsIcon color="primary" fontSize="large" />
Activity
</ListItemIcon>
</ListItem>
</List>
</Drawer>
</div>
);
}
I want to similar to this one:
Please help. Thank you.
sometimes it's not MUI at all but pure CSS. MUI already provides icon and label, you just have to work CSS a bit, this one may work just customizing ListItemIcon styles with flex properties (see listItemIcon class rules):
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
listItemIcon: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
},
drawer: {
width: drawerWidth,
alignItems: "center",
justifyContent: "center",
paddingTop: theme.spacing(5)
},
drawerPaper: {
width: drawerWidth
}
}));
export default function Demo() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed" color="primary">
<Toolbar></Toolbar>
</AppBar>
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
className={classes.drawer}
>
{/* <NotificationsIcon size="large" /> */}
<List>
<ListItem>
<ListItemIcon className={classes.listItemIcon}>
<NotificationsIcon color="primary" fontSize="large" />
Activity
</ListItemIcon>
</ListItem>
</List>
</Drawer>
</div>
);
}
When MUI does not provide default styles for it, you can always use flex-box
I tried this way, and it worked. Need to wrap the Icons in a div and it will work.
<List>
<ListItem style={{ textAlign: "center" }}>
<div>
<NotificationsIcon color="primary" fontSize="large" />
Activity
</div>
</ListItem>
<ListItem style={{ textAlign: "center" }}>
<div>
<NotificationsIcon color="primary" fontSize="large" />
Activity
</div>
</ListItem>
</List>
https://codesandbox.io/s/material-demo-forked-b73ds?file=/demo.js