是否有可能将html元素放置到材料UI网格的左侧？
是否有可能将html元素放置到材料UI网格的左侧？
提问于 2020-02-27 17:02:12
使用材质UI进行样式设计。
是否有可能将HTML元素或排版元素放置在Grid的左侧，并使其仍在同一行上？
下面是代码的一个小片段。
return (
<Wrapper>
<form>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);例如，我想添加一个排版元素，并将其显示在与网格项serviceDateOne和serviceDateTwo相同的行中，这会是什么样子？我试过了
return (
<Wrapper>
<form>
<Typography>TEST</Typography>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);添加排版元素显示在serviceDateOne和serviceDateTwo所在的行的上方。顺便说一句，这个组件只是一个样式的div。元素包含在网格中，我试图实现的是将该元素放置在网格之外和表单的左侧，就像该行的侧标签一样，并且只将网格项作为网格的一部分
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-27 17:18:46
网格用于分离，所以只需在顶层进行分离即可。
return (
<>
<Grid container spacing={1}>
<Grid item xs={3} style={{ backgroundColor: "lightgray" }}>
<Typography>TEST</Typography>
</Grid>
<Grid item xs={9}>
XXX
<Grid container spacing={1}>
<Grid item xs={12}>
YYY
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
</Grid>
</Grid>
</Grid>
</>
);更新
在一行中显示两个子元素: ref 问：
return (
<div style={{ display: "flex" }}>
<Typography style={{ backgroundColor: "lightgray", width: 100 }}>
TEST
</Typography>
<Grid container spacing={1} style={{ backgroundColor: "gray" }}>
<Grid item xs={12}>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60438331
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号