gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 05:31:45 25 4
gpt4 key购买 nike

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

您可以在此处查看问题: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 以及适用于它们的属性。最让我困惑的是,即使为每个项目指定列也不起作用。任何有关如何调试此类问题的帮助也将不胜感激。

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

最佳答案

您基本上只需要堆栈,除了堆栈之外,您还必须使用 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 用于横幅广告。谢谢。

关于javascript - 如何使用 MUI 将图像与两条文本行对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74296772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com