javascript 如何使用Material UI将图像与两个文本行对齐

jaql4c8m 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(133)

我想创建一个左侧带有图标的横幅区域。中间是两行文字（标题和副标题）。然而，这三个都显示在不同的行上。
你可以在这里看到问题：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>
    </>
  );
}

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

- 更新：**我通过将更改为容器以及解决了这个问题。容器遵循direction属性，从而允许我并排布置堆栈。更新的解决方案在沙箱中。

JavaScript

来源：https://stackoverflow.com/questions/74296772/how-to-align-image-with-two-text-lines-using-material-ui

2条答案

按热度按时间

disbfnqx1#

你基本上只需要一个堆栈，沿着堆栈，你还需要使用Alert来创建一个带有Material UI的Banner。让我给予你一个示例代码：

<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
首先，你必须了解一下网格的基本含义：
网格是一个具有行和列结构的二维流，当你想指定你的卡片或给予它们特定的行和列时，你可以使用网格。

Box就像一个一维系统，你只有一个维度，你想在一个方向指定你的卡片，无论是行还是列。它就像一个普通的CSS Flexbox和Grid系统。

如您所知，Stack用于banner。谢谢

赞(0）回复(0）举报 2023-05-21

qybjjes12#

通过向网格中添加项目属性和容器属性来解决。我的问题是，内的两个堆栈是垂直布局的，方向属性设置为“行”被忽略。当添加属性容器时，将采用方向属性。我还取消了在堆栈上使用xs属性。

import { Grid, Stack, Typography } from "@mui/material";

export default function App() {
  return (
    <>
      <Grid container>
        <Grid
          item
          container
          xs={12}
          direction="row"
          sx={{ borderBottom: 1, borderColor: "grey.500" }}
        >
          <Stack sx={{ alignItems: "center" }}>
            <Typography>Icon</Typography>
          </Stack>
          <Stack
            sx={{
              alignItems: "center",
              direction: "column",
              flexGrow: 1
            }}
          >
            <Typography variant="h5">My-Title</Typography>
            <Typography variant="h7" sx={{ fontStyle: "italic" }}>
              My-Subtitle
            </Typography>
          </Stack>
        </Grid>
      </Grid>
    </>
  );
}

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 如何使用Material UI将图像与两个文本行对齐

2条答案

相关问题

热门标签

最新问答