Точки останова пользовательского интерфейса для установки ориентации: книжная и альбомная ориентация

Question

Хотелось бы иметь возможность устанавливать книжные и альбомные виды объекта стилей для планшетов в Material UI

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.secondary.main
    }
  }
}

как добавить точки останова для портретной и альбомной ориентации, аналогично традиционному медиазапросу:

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Answer 1

Просто установите что-то вроде этого:

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [`${theme.breakpoints.up('md')} and (orientation: portrait)`]: {
      flexDirection: 'column'
    }
  }
}

Answer 2

Вы можете использовать что-то вроде этого:

'@media (orientation: landscape)': {
  flexDirection: `column`,
},

для медиа-запроса commponet собирается прикрепить.