Develop Reference

MUI CardContent and flexBox doesn't work with typography and chip

Below is react code made with MUI. The aim is to create a Card that displays Character Information.
const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => {
return (
<Card sx={{ maxWidth: 256, borderRadius: 4 }}>
<Box
component="a"
href={`/#/${characterKey}`}
display="flex"
position="relative"
sx={{
"&::before": {
content: '""',
display: "block",
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
opacity: 0.7,
backgroundImage: `url(${bannerImgUrl})`,
backgroundPosition: "center",
backgroundSize: "cover",
},
}}
width="100%"
>
<Box
flexShrink={1}
sx={{ maxWidth: { xs: "40%", lg: "40%" } }}
alignSelf="flex-end"
display="flex"
flexDirection="column"
zIndex={1}
>
<Box
component="img"
src={iconImgUrl}
width="100%"
height="auto"
maxWidth={256}
sx={{ mt: "auto" }}
/>
</Box>
</Box>
<CardContent>
<Typography variant="h5" component="div">
{characterName}
</Typography>
{/* <Typography variant="body2" color="text.secondary"> */}
{/* {characterInfo.title as string} */}
{/* </Typography> */}
<Chip
label={characterChipInfo}
size="small"
/>
</CardContent>
</Card>
);
};
This is what the final result looks like:
I want the chip component (reads as CRYO in the image and is characterChipInfo in the above code) to be on the same line as the characterName and be separated like a space-between flexbox, however using the Box component with flex-box and justifyContent="space-between" to encase the name Typography and Chip doesn't work. I've also tried along with it changing the Typography display to inline-flex and inline-block, which makes them on the same line but the Box's justifyContent=space-between doesn't work.

You need to use a Stack component of Material UI like so:
CodeSandBox
<Stack
direction="row"
spacing={2}
justifyContent="space-between"
alignItems="center"
>
<Typography variant="h5" component="div">
{characterName}
</Typography>
{/* <Typography variant="body2" color="text.secondary"> */}
{/* {characterInfo.title as string} */}
{/* </Typography> */}
<Chip
label={characterChipInfo}
size="small"
/>
</Stack>

Detect screen break point inside the component jsx itself

I have the following component:
<Stack direction="row" spacing={2}>
<Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
<Loading
text="Loading..."
sx={{ position: 'relative', background: 'none', color: 'grey' }}
recommendedSolutions={
<LoadingBtn
onClick={refetch}
variant="outlined"
loadingIndicator="Refetching data..."
loading={loading}
>
Try again
</LoadingBtn>
}
/>
</Stack>
I want to be able to change the direction prop of the Stack component based on the screen breakpoint. The question is:
I can use the grid component to solve this problem as follows:
<Grid container>
<Grid item sx={{ display: { xs: 'none', md: 'block' } }}>
<Stack direction="row" spacing={2}>
<Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
<Loading
text="Loading..."
sx={{ position: 'relative', background: 'none', color: 'grey' }}
recommendedSolutions={
<LoadingBtn
onClick={refetch}
variant="outlined"
loadingIndicator="Refetching data..."
loading={loading}
>
Try again
</LoadingBtn>
}
/>
</Stack>
</Grid>
<Grid item sx={{ display: { xs: 'block', md: 'none' } }}>
<Stack direction="vertical" spacing={2}>
<Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
<Loading
text="Loading..."
sx={{ position: 'relative', background: 'none', color: 'grey' }}
recommendedSolutions={
<LoadingBtn
onClick={refetch}
variant="outlined"
loadingIndicator="Refetching data..."
loading={loading}
>
Try again
</LoadingBtn>
}
/>
</Stack>
</Grid>
</Grid>
but this makes me repeat similar code, is there a way I can do it within the direction prop of the Stack component itself? it's a tough task to write that much code

React Mui Accordation Data collapse when loading (the data is coming from api)

my COde:
<Accordion style={{ width: '550px' }} expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
<Typography style={{ fontWeight: 700 }}> Gig Posted </Typography>
</AccordionSummary>
<AccordionDetails>
<Typography style={{ fontWeight: 700 }} >
Card Owner Name
</Typography>
<Divider />
<Typography style={{ marginLeft: '350px', marginTop: '-23px' }}>
{job_summary.card_alias_name}
</Typography>

Using the Material UI App Bar and React Router

I'm currently trying to build a website using react for my web development class, which is my first foray into JS and React. I'm using a Material UI appbar for my header. I've used react router in one of my class examples so I've set that up and my app bar is displaying as intended. My question is, how do I set the buttons on the appbar/header to link to my pages? The default code (minus imports) provided by Material UI is below with my placeholder page names added.
const pages = ['Utility List', 'Register', 'Login'];
const settings = ['Profile', 'Account', 'Logout'];
const Header = () => {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
variant="h6"
noWrap
component="div"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default Header;

Find the place in your code where your navbar links are added to JSX. Wrap each link in Link component from react-router
const yourPages = [
{ text: 'Home', href: '/' },
{ text: 'About', href: '/about' }
]
// inside return statement
{yourPages.map((page) => (
<Link href={page.href}>{page.text}</Link
)}
...

Conditionally Rendering Material UI Elements in React

I want to render Material UI Elements like MenuItem of a AppBar Conditionally if some conditions are true. In my example menu items should only be rendered for specific users. But it doesnt work like the way it would work with normal html in react.
{context.token && context.userRole === "USER" && (
<MenuItem key="submission" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Submission</Typography>
</MenuItem>
)}
{context.token && context.userRole === "JUDGE" && (
<MenuItem key="submissions" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Submissions</Typography>
</MenuItem>
)}
Its rendering this Items all the time anyways and seems to ignoring the conditions.
The full code:
import React from "react";
import { NavLink } from "react-router-dom";
import AuthContext from "../context/auth-context.js";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Toolbar from "#mui/material/Toolbar";
import IconButton from "#mui/material/IconButton";
import Typography from "#mui/material/Typography";
import Menu from "#mui/material/Menu";
import MenuIcon from "#mui/icons-material/Menu";
import Container from "#mui/material/Container";
import Avatar from "#mui/material/Avatar";
import Button from "#mui/material/Button";
import Tooltip from "#mui/material/Tooltip";
import MenuItem from "#mui/material/MenuItem";
import ComputerIcon from "#mui/icons-material/Computer";
const ResponsiveAppBar = (props) => {
const pages = ["Conditions", "Winner", "Submission", "Submissions", "Login"];
const settings = ["Profile", "Settings", "Logout"];
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
return (
<AuthContext.Consumer>
{(context) => (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
variant="h6"
noWrap
component="div"
sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
>
<ComputerIcon />
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" },
}}
>
{context.token && context.userRole === "USER" && (
<MenuItem key="submission" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Submission</Typography>
</MenuItem>
)}
{context.token && context.userRole === "JUDGE" && (
<MenuItem key="submissions" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Submissions</Typography>
</MenuItem>
)}
<MenuItem key="conditions" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Conditions</Typography>
</MenuItem>
<MenuItem key="winner" onClick={handleCloseNavMenu}>
<Typography textAlign="center">Winner</Typography>
</MenuItem>
</Menu>
</Box>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: "white", display: "block" }}
>
{page}
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar
alt="Remy Sharp"
src="/static/images/avatar/2.jpg"
/>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: "45px" }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
)}
</AuthContext.Consumer>
);
};
export default ResponsiveAppBar;