I am trying to design a banner area with an icon on the left and two lines of text (title and sub-title) in the middle. However, when I implement this structure, each element appears on a separate line.
You can view the issue here: https://codesandbox.io/s/bold-brook-71ucup?file=/src/App.js:366-402. To simplify things, I have replaced the icon area with text.
import { Grid, Stack, Typography } from "@mui/material";
export default function App() {
return (
<>
<Grid container>
<Grid item xs={12} direction="row">
<Stack xs={3}>
<Typography>Icon</Typography>
</Stack>
<Stack
sx={{
borderBottom: 1,
borderColor: "grey.500",
alignItems: "center",
xs: 9,
direction: "column"
}}
>
<Typography variant="h5">My-Title</Typography>
<Typography variant="h7" sx={{ fontStyle: "italic" }}>
My-Subtitle
</Typography>
</Stack>
</Grid>
</Grid>
</>
);
}
I am struggling with using Material UI components like Grid, Box, and Stack effectively. I find it confusing knowing when to use them and which properties to apply. Even specifying columns for each item doesn't seem to work as expected. Any guidance on how to troubleshoot such problems would be greatly appreciated.
Update: I managed to resolve the issue by changing the <Grid item ...> to also be a container as <Grid item container ...>. This allowed me to correctly utilize the direction property within the container so that I could align the stacks side by side. The updated solution can be found in the sandbox.