css - 如何在 Material ui 网格中设置断点以使其响应

Question

我正在使用 Material ui Grid 来排列我的 ui 元素。下面是我的代码

<Grid container spacing={3}>
<Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRight: '1%' }}>
<Grid item xs={7} sm={7} md={7}>
   <label className={classes.title}> Title </label>
</Grid>
<Grid item xs={5} sm={5} md={5}>
   <label style = {{marginLeft: '25%'}}> Lable 1 </label>
   <label> Lable 2 </label>
</Grid>
</Grid>

现在，按照上面的代码，我想让设计根据屏幕尺寸响应并添加断点，我该如何实现呢？另外，有什么方法可以处理浏览器分辨率/缩放，我的设计是水平滚动和更大的缩放。

Answer 1

为了使这个工作导入

import {createMuiTheme,ThemeProvider} from "@material-ui/core/styles"

如上所述，您使用以下代码设置断点。您不限于可以使用任何您想要的预定义名称。这些值是断点的最小宽度。所以在这种情况下，XS 停在 449px。

const theme = createMuiTheme({
 breakpoints: {
   values: {
    xs: 0,
    sm: 450,
    md: 600,
    lg: 900,
    xl: 1200,
    tablet:1024
  }
}
});

然后您必须使用主题提供程序来实现它。

<ThemeProvider theme={theme}>
   <Grid container><Grid item xs={12}>Some stuff</Grid></Grid>
</ThemeProvider>