如何使用 css 为单个材质 ui Grid 实例自定义 md 断点答案

【问题标题】：How to customize md break point for a single material ui Grid instance using css如何使用 css 为单个材质 ui Grid 实例自定义 md 断点
【发布时间】：2020-12-14 20:39:51
【问题描述】：

我正在使用材料 ui Grid 进行响应式 ui。

<Grid spacing={2} xs={12} container={true}>
  <Grid item={true} lg={4} md={6} sm={12}>...</Grid>
  <Grid item={true} lg={4} md={6} sm={12}>...</Grid>
  <Grid item={true} lg={4} md={6} sm={12}>...</Grid>
</Grid>

我想自定义断点md 到npx 的屏幕宽度，并且我只想在这一个实例中执行此操作。不是通过应用程序。

我找到了如何为整个应用程序以及使用样式的单个网格实例执行此操作。

const styles = theme => ({
  root: {
    [theme.breakpoints.up('md')]: {
      width: npx,
    },
  },
});

但更喜欢使用 css 而不是材质 ui 样式。我该怎么做？

【问题讨论】：

标签： css reactjs typescript material-ui

【解决方案1】：

首先，将your-class 添加到每个项目。然后使用这个 css：


@media (min-width:960px) { //change min-width to your selected value
  .MuiGrid-grid-md-6.your-class {
    flex-grow: 0;
    max-width: 50%;
    flex-basis: 50%;
  }
}

如果您的新断点是 < 960px，则该方法有效。如果值为> 960px，您也需要这个：


@media (min-width:600px) and (max-width:959px) { //change max-width to (your selected value - 1)
  .MuiGrid-grid-sm-12.your-class {
    flex-grow: 0;
    max-width: 100%;
    flex-basis: 100%;
  }
}

您也可以对其他断点使用相同的推理。例如：lg，默认断点为1280px：

@media (min-width:1280px) {//change min-width to your selected value
  .MuiGrid-grid-lg-4.your-class {
    flex-grow: 0;
    max-width: 33.333333%;
    flex-basis: 33.333333%;
  }
}

// If breakpoint > 1280px, also add

@media (min-width:960px) and (max-width:1279px) { //change max-width to (your selected value - 1)
  .MuiGrid-grid-md-6.your-class {
    flex-grow: 0;
    max-width: 50%;
    flex-basis: 50%;
  }
}

进一步的自定义将取决于您设置的值，即 lg={4} 与 lg={3}... 我已经粘贴了 MuiGrid here 的完整 CSS 定义。

【讨论】：