Javascript 用于设置方向的材质UI断点：纵向和横向视图

希望能够在Material UI中为平板电脑的styles对象设置纵向和横向视图

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

---

您可以使用以下内容：

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

---

对于commponet，将附加媒体查询

只需设置如下内容：

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

---

您面临的问题是什么？请记住，此规则应作为单独的元素，而不是嵌套的元素。