断点响应式

• xs 超小：0px
• sm小：600px
• md中：900px
• lg大：1200px
• xl超大：1536 像素

1. 匹配大于md的宽度

theme.breakpoints.up('md')

2. 匹配小于md的宽度

theme.breakpoints.down('md')

3. 只匹配md响应式宽度

theme.breakpoints.only('md')

4. 匹配除了md响应式宽度

theme.breakpoints.not('md')

示例

1. 例子1:

[theme.breakpoints.up('sm')]: {  
  width: '15ch',  
  '&:focus': {  
    width: '20ch',  
    border: '1px solid #2c88ff',  
  },  
},

参考

MUI