反応にtheme.breakpointsを組み合わせるには？

Question

私のアプリでいくつかの設定が必要です。 は、例えば、私は材料-UIからコンポーネント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

これは、だから、両方のソリューションが動作しなければならないMUI Github repo

にoliviertassinariで答えました。しかし、これはテストされていないコードであることに注意してください。

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


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