How to use MUI to stack components on top of eachother? - css

Question

I want a div that looks like this on Desktop:
------------------------------------------------------------------
| (icon) | (content) |(button here)|
------------------------------------------------------------------
to look like this on mobile:
--------------------------
|(icon)| (content) |
--------------------------
| (button here) |
--------------------------
I have tried using Card and CardHeader, but they don't give me the results I want on mobile:
<Card sx={{ width: "90%", marginBottom: 2 }}>
<CardHeader
avatar={<img src={icon} style={{ maxWidth: "100%" }} />}
action={
<Button
onClick={onClick}
variant="contained"
sx={{
width: "173px",
height: "48px",
letterSpacing: 1.4,
}}
>
{buttonText}
</Button>
}
title={children}
subheader={subContent}
/>
</Card>
I would prefer an alternative to Card. Grid doesn't seem to have stackable capabilities, so not sure what to do there... Thank you.

Answer 1

From your illustration above, it sounds like Grid is exactly what you're looking for, as Grid is specifically for responsive layouts. You can use a combination of the xs, sm, md, lg, and xl props to define how much space, in the 12 column layout, that you want each item to occupy at a given breakpoint. For example, in your case:
<Grid container>
<Grid item xs={4} sm={2}>
(icon)
</Grid>
<Grid item xs={8} sm={8}>
(content)
</Grid>
<Grid item xs={12} sm={2}>
(button here)
</Grid>
</Grid>
sm+:
xs:
Working example for your use case: https://codesandbox.io/s/basicgrid-material-demo-forked-q795q?file=/demo.js:0-725

Answer 2

MUI Stack component is usually great for stacking
[1]: https://mui.com/material-ui/react-stack/
I have played with it below a little bit but check out the spec maybe its may save you a lot
import { Stack } from '#mui/material'
{ isMobile ? <Stack justifyItems="center" sx={{ width: `100%` }}>
<Stack direction="row" spacing={12} alignItems="center" sx={{ margin: `auto` }}>
<p>Icon</p>
<p>Content</p>
</Stack>
<Stack sx={{ margin: `auto auto` }}>
<button>Button here</button>
</Stack>
</Stack> : <Stack direction="row" spacing={12} alignItems="center">
<p>Icon</p>
<p>Content</p>
<button>Button here</button>
</Stack> }