Material UI breakpoints to set orientation: portrait and landscape view

Question

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;
  }
}

what issue you're facing ? – Sakhi Mansoor Sep 03 '18 at 13:09 — Sakhi Mansoor, Sep 03 '18 at 13:09

score 10 · Answer 1 · answered Aug 09 '19 at 07:32

10

Just set something like that:

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

answered Aug 09 '19 at 07:32

Valentyn Solovyov

141
1
4

Andrey Furman · Answer 2 · 2021-11-04T07:19:17.050

4

You're able to use something like this:

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

for the component media query will be attached.

edited Nov 04 '21 at 07:19

answered Dec 10 '18 at 14:48

Andrey Furman

81
8

Only remember that this rule, should go as a separate element but not as a nested. – Andrey Furman Dec 10 '18 at 16:33

score 0 · Answer 3 · answered Jun 28 '21 at 06:08

Used this in version 4.11.1

const useStyles = makeStyle((theme) =>({
    container:{
        border:"1px dashed red",
        [theme.breakpoints.down("md")]{
           border: "1px solid blue",
           '@media (orientation: landscape)': {
              border: "1px solid green",,
            },
        },
    },
}));

Material UI breakpoints to set orientation: portrait and landscape view

3 Answers3

Used this in version 4.11.1