I am using MUI Breadcrumb in my Code. I want to center the Content in Breadcrumb. I Try this code
<BreadcrumbStyle style={{marginTop:30}}>
<Card elevation={3} style={{padding:10}}>
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb" >
<Link underline="hover" color="inherit" href="/" sx={{ display: "flex", alignItems: "center" }} ><HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" /> Home </Link>
<Typography >Projects </Typography>
<Typography style={{color:"blue", fontWeight:"bold",}} noWrap >React JS Web Application</Typography>
</Breadcrumbs>
</Card>
</BreadcrumbStyle>
I want to center the content in Breadcrumb. I need the expected output
The content is left-aligned by the flex container, not by text-align.
You should be able to fix it by adding this to the Breadcrumbs component:
<Breadcrumbs
separator={<NavigateNextIcon fontSize="small" />}
aria-label="breadcrumb"
sx={{
"& ol": {
justifyContent: "center",
margin: "auto"
}
}}
>
Try style={{textAlign:"center" }} in the Card tag.
Related
I'm using the FormControlLabel component from MUI and the label is always getting placed at the end, even if I set the labelPlacement prop to "start", "top" or "bottom".
This is my code:
<FormControlLabel
label="Connected account"
labelPlacement="start"
control={
<MDBox display="inline">
<MDTypography variant="caption" mr={2}>
Account Name
</MDTypography>
<MDButton
color="error"
size="small"
sx={{ m: "0.25rem" }}
onClick={() => disconnectAccount(idAccount)}
>
<MDTypography
fontSize="0.6rem"
color="white"
fontWeight="bold"
textTransform="uppercase"
>
Remove Account
</MDTypography>
</MDButton>
</MDBox>
}
sx={{
backgroundColor: "#f7fafc",
mb: "1rem",
borderRadius: "0.5rem",
pl: "1rem"
}}
/>
This is what the UI looks like with labelPlacement set to "end" and "start", respectively, meaning a left margin is added when set to "start":
Am I missing something here?
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>
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
Hello I want to know how do you change the zAxis of a paper from MUI
As you can see the carousel overlaps my menu and I would like my menu to be on top of everything.
This is how I have it wrapped:
<Box sx={{ background: '#272A31', flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
<StyledIconButton size="small" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick={handleToggle} ref={anchorRef} >
<GamesIcon />
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> GAMES </Typography>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} placement="bottom-start" transition disablePortal >
{({ TransitionProps, placement }) => (
<Grow {...TransitionProps}
style={{
transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom',
}}
>
<StyledPaper sx = {{zIndex: 1600}} >
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="composition-menu" aria-labelledby="composition-button" onKeyDown={handleListKeyDown}>
<StyledMenuItem onClick={handleClose}>JUNGLE RAIDER</StyledMenuItem>
<StyledMenuItem onClick={handleClose}>MEGAMAN TEMPLATE</StyledMenuItem>
<StyledMenuItem onClick={handleClose}>TOWER DEFENSE</StyledMenuItem>
<StyledMenuItem onClick={handleClose}>BLADES AND DUNGEON</StyledMenuItem>
<StyledMenuItem onClick={handleClose}>FIXSPACE</StyledMenuItem>
</MenuList>
</ClickAwayListener>
</StyledPaper>
</Grow>
)}
</Popper>
</StyledIconButton>
</Box>
While my Carousel is wraped in the following way:
<Box mb = {2} mt = {2} sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: -1}}>
<Card sx={{ width: 1500, backgroundColor: "transparent"}} >
<Carousel fullHeightHover={false} navButtonsAlwaysVisible={true} duration={500} animation="slide"
navButtonsProps={{
style: {
backgroundColor: '#FF5917',
borderRadius: 0,
}
}} >
{items.map( (item, i) => <Item key={i} item={item} />)}
</Carousel>
</Card>
</Box>
Even though the paper is at z-(1600) and the carousel box at z-(-1) it still overlaps the paper for some reason
https://mui.com/customization/z-index/ check this link. tooptip has highest zindex value. you can add it to your popper
Im trying to bring this - icon closer to the text but i'm not exactly sure how.
When I go into developer mode it shows me this.
I don't know what the purplish stuff means. My end goal is to try to move the icon to the upper right corner of where the "Steve First" box is but I'm not sure how to do that. This is the code where i'm building my list.
<List style={{ display: "flex", flexDirection: "row", padding: 0 }}>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText
className={classes.peopleListSpacing}
primary="Steve First Steve First Steve First"
/>
</ListItem>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText className={classes.peopleListSpacing} primary="Steve First" />
</ListItem>
</List>
The code display this.
The purple space is available space that is not being utilized.
How about just making your ListItemAvatar a flex container and centering it? You might like to right align it, then just add some right margin.
Create a new listItemAvatar prop in your classes object.
display: flex;
justify-content: center;
<ListItemAvatar className={classes.listItemAvatar}>
<Avatar src="..." />
</ListItemAvatar>