Material UI 组件中的媒体查询

我在 React.js 项目中使用 Material UI 组件，出于某种原因，我需要对某些组件进行自定义，以使其根据屏幕宽度进行响应。

我已经添加了media query并将其作为组件中的样式属性传递，但不起作用，知道吗？

我正在使用这样的代码：

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

该代码仅适用于网络，在移动设备上无效。甚至CSS代码不适用我已在开发人员控制台中检查过。我正在使用 Material UI 版本0.18.7.

任何帮助，将不胜感激。

PS：根据要求，我需要根据屏幕尺寸进行一些更改CSS.

通过使用主题的断点属性，您可以直接在组件中利用用于网格和隐藏组件的相同断点。

API

theme.breakpoints.up(key) => media query

论点

key (String | Number)：断点键（xs、sm 等）或屏幕宽度数字（以像素为单位）。

Returns媒体查询：准备与 JSS 一起使用的媒体查询字符串。

Examples

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

了解更多信息看一下这个 https://mui.com/material-ui/customization/breakpoints/