Material UI 断点设置方向：纵向和横向视图

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: `orientation`,
},

对于组件媒体查询将附加。

Answer 3

在 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",,
            },
        },
    },
}));