我如何才能仅在反应材料 ui 中的特定尺寸上证明内容？

Posted 2023-02-22

【中文标题】我如何才能仅在反应材料 ui 中的特定尺寸上证明内容？

【英文标题】：How can i justifyContent only on specific sizes in react material ui?

【发布时间】：2021-06-03 22:27:31

【问题描述】：

我在 React Material UI 中有一个网格布局。

我希望大尺寸的内容在中心对齐，但小尺寸作为默认的 flex-start。

<Grid item xs=12 md=2>
                    <Box display="flex" justifyContent="center">
                    <FormControlLabel
                            control=
                                <Checkbox
                                    checked=checkbox
                                    onChange=(e) => onCheckBoxChange(e)
                                    name="checkedB"
                                    color="primary"
                                    className=classes.inputFullWidth
                                />
                            
                            label="Search by date ?"
                        />
                    </Box>
                    
                    </Grid>

问题是在他们的文档中我没有找到这样的例子

https://material-ui.com/system/flexbox/#justify-content

在引导程序中，我们有类似的东西

justify-content-md="center"

这意味着只有在 md > 断点上，内容才会居中对齐。

如何使用 react material ui 做到这一点？

【参考方案1】：

尝试在对象中传递它：

   <Box display="flex" justifyContent=lg: "center", sm: "flex-start">

在 mui v5 中工作