如何结合theme.breakpoints的反应？

Question

我需要一些配置在我的应用程序被重新定位。例如，我使用了material中的组件SearchIcon，并希望在屏幕上调整它：

style = themes => {
 iconSearch: {
  [theme.breakpoints.up('sm') && theme.breakpoints.down('md')]: {
    margin: 14%
  }
  [theme.breakpoints.up('md') && theme.breakpoints.down('lg')]: {
    margin: 8%
  }
}

但这并没有考虑到min-width=576px和max-width=768px的利润率为14%，也没有考虑到第二种选择。怎么解决这个问题？

Answer 1

这是由寡核苷酸在梅吉顿回购上回答的

所以这两种解决方案都应该有效。但请注意，这是未经测试的代码。

style = themes => {
 iconSearch: {
  [`${theme.breakpoints.up('sm')} and ${theme.breakpoints.down('md')}`]: {
    margin: 14%
  }
}


style = themes => {
 iconSearch: {
  [theme.breakpoints.between('sm', 'md')]: {
    margin: 14%
  }
}