MUI 组件中的媒体查询

Question

我在 ReactJs 项目中使用 MUI 组件，出于某种原因，我需要在某些组件中进行自定义以使其根据屏幕宽度做出响应。

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

我正在使用这样的代码：

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

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

代码仅适用于网络，在移动设备上无效。甚至 CSS 代码也没有应用我已经在开发者控制台中检查过。我正在使用 MUI 版本 0.18.7 。

任何帮助，将不胜感激。

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

原文由 Pardeep Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过使用主题的断点属性，您可以直接在组件中使用用于 Grid 和 Hidden 组件的相同断点。

应用程序接口

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

参数

键（字符串 | 数字）：断点键（xs、sm 等）或以像素为单位的屏幕宽度数字。

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

例子

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

有关更多信息， 请查看

原文由 amin khademian 发布，翻译遵循 CC BY-SA 4.0 许可协议