Как установить несколько точек останова на элементе сетки в пользовательском интерфейсе материала в React? - PullRequest
Новая
       6

Как установить несколько точек останова на элементе сетки в пользовательском интерфейсе материала в React?

0 голосов
/ 24 января 2019

У меня есть компоновка HOC с сеткой. Внутри у меня есть 4 компонента Widget с элементами Grid. Я хочу, чтобы эти компоненты отображались следующим образом:

  • большие экраны: все 4 в 1 ряду
  • средних экранов: 2 в ряд, 2 столбца
  • маленьких экранов: 1 виджет, занимающий всю ширину, 4 строки

Итак, я настроил это так: 

<Grid item xs={12} sm={2} md={3}>
  ...content
</Grid>

Однако, когда я изменяю размер экрана, он переходит непосредственно от 4 до 1.

Я попытался перенастроить тему в моем index.js: 

const theme = createMuiTheme({
  breakpoints: {
    values: {
    md: 1100
    }
  } ,
  typography: {
    useNextVariants: true
  }
});

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  </Provider>, document.getElementById('root')
);

Что еще я могу сделать? Как я могу заставить это работать?

1 Ответ

0 голосов
/ 24 января 2019

У вас есть sm={2}, что означает, что каждая строка разбита на 6 столбцов (теперь ваши виджеты покрывают 4/6 столбцов на sm экранах)

Ваши виджеты, вероятно, становятся еще меньше по размеру при переходе между md => sm, но вы этого не заметили, затем он вернулся к 1

Вам нужно иметь sm={6}, чтобы иметь 2 виджета в строке, вам не нужно настраивать точки останова тем

...