本文介绍了MUI组件中的媒体查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在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组件中的媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!