如何设置 React Material ui 网格项的最小宽度？

Question

我有这段代码...我想要一个宽度至少为 250 像素的“列”...我尝试了 Material ui 建议的尺寸调整： https: //material-ui.com/system /sizing/似乎没有任何运气...当窗口大小缩小时，'logo' 元素将缩小到小于 250px。当发生这种情况时，红色网格项（它本身是包含我的实际数据的网格容器）会遮盖徽标。

如何设置 Material ui Grid 项目的最小宽度？

<Grid
    container
    direction="row"
>
    <Grid item xs={3}  >
        <Box width={250}>
            <img src={Logo} key="logo" width="250"  height="100" alt="Logo" />
        </Box>
    </Grid>
    <Grid item style={{ backgroundColor: '#f22' }} xs={9}>
        <Grid
            container
            direction="row"
            justify="flex-start"
            spacing={2}
        >
        {this.panelGrid(eventID, panelData)}
        </Grid>
    </Grid>
</Grid>

Answer 1

我想你可以试试这个：

<Grid item xs={3} sx={{minWidth: '250px'}}  >