Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI breakpoints to set orientation: portrait and landscape view

Would like to be able to set portrait and landscape views on the styles object for tablets in Material UI

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

how can i add breakpoints for portrait view and landscape view similar to the traditional media query:

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

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
like image 993
Julio Cornelio Avatar asked Sep 03 '18 13:09

Julio Cornelio


1 Answers

Just set something like that:

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [`${theme.breakpoints.up('md')} and (orientation: portrait)`]: {
      flexDirection: 'column'
    }
  }
}
like image 166
Valentyn Solovyov Avatar answered Oct 20 '22 04:10

Valentyn Solovyov