javascript - 如何使用 MUI 将图像与两条文本行对齐

Question

我想创建一个左侧带有图标的横幅区域。中间是两行(标题和副标题)文本。然而，所有这三个都出现在不同的行上。

您可以在此处查看问题:https://codesandbox.io/s/bold-brook-71ucup?file=/src/App.js:366-402 .为了简单起见，我用文本替换了应该出现图标的区域。

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>
    </>
  );
}

我在使用 MUI 时遇到了麻烦，因为我不知道何时使用 Grid、Box 或 Stack 以及适用于它们的属性。最让我困惑的是，即使为每个项目指定列也不起作用。任何有关如何调试此类问题的帮助也将不胜感激。

更新: 我通过将 也更改为容器 解决了这个问题。方向属性由容器提供，因此允许我并排布置堆栈。更新后的解决方案在沙箱中。

Answer 1

您基本上只需要堆栈，除了堆栈之外，您还必须使用 Alert 来创建带有 MUI 的横幅。 让我给你一个示例代码:

<Stack sx={{ width: '100% }} spacing={2} >
  <Alert 
      severity="info" 
      sx={{ 
        fontSize: '14px'
        }}
    >
    "Title and Subtitle will be here"
  </Alert>
</Stack>

Banner with a Todo addition

首先，您必须了解网格 gird 的基本含义:

网格是具有行列结构的二维流，当你想指定你的卡片或给它们特定的行和列时，你可以使用网格。

Box 就像一个一维系统，您只有一个维度，并且您希望在行或列的一个方向上指定您的卡片。 它就像普通的 CSS Flex 框和网格系统。

如您所知，

Stack 用于横幅广告。 谢谢。