Блог

Я использую сетку material 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 вместо стилей пользовательского интерфейса material. Как я могу это сделать?

Сначала добавьте 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} vs lg={3} … Я вставил полные определения css для MuiGrid здесь.