MUI组件中的媒体查询 [英] Media queries in MUI components

问题描述

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

我已经添加了media query，并将其作为样式属性传递到组件中，但不起作用，您有什么想法吗？

我使用的代码如下：

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

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

代码仅适用于Web，在移动设备上不起作用。即使CSS代码也不适用，我已经在开发人员控制台签入了。我使用的是MUI版本0.18.7。

如有任何帮助，我们将不胜感激。

PS：根据需要，我需要使用CSS根据屏幕大小做一些更改。

推荐答案

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

接口

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

参数

key(string|number)：断点键(xs，sm等)或以像素为单位的屏幕宽度值。

退货 媒体查询：可以与JSS一起使用的媒体查询字符串。

示例

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

有关详细信息check this out

这篇关于MUI组件中的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！