我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。
|<-------------------------------- 100% 的页面 ---------- ---------------------->|
|<-------------------- 填充-------------------->| |<------------ 400px ------------>|
当页面宽度缩小时:
|<-------------------- 100% 的页面 ------------------> |
|<-------- 填写-------->| |<------------ 400px ------------>|
我的代码目前正在将 leftComponent
拉伸(stretch)到页面的 100%,并将 rightComponent
推到其下方。
<Grid container spacing={3}>
<Grid item xs={12} >
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
最佳答案
您需要做的就是删除您的 xs
值的数字。这样做只是告诉该项目的宽度为 auto,这将刚好填充空间
<Grid container spacing={3}>
<Grid item xs>
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
虽然我建议在这种情况下不要使用网格,而是使用 Box
组件,因为 Grid
组件实际上是为了坚持 12 列并添加一个固定的宽度会破坏它。
关于reactjs - Mui Grid Item Fixed Width Item Beside Fill Width Item,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70455595/