我在ReactJs项目中使用 MUI 组件，出于某种原因，我需要在某些组件中进行自定义以使其根据屏幕宽度做出响应。
我已经media query在组件中添加并传递它作为样式属性但不起作用，知道吗？
我正在使用这样的代码：
const drawerWidth = {
width: '50%',
'@media(minWidth: 780px)' : {
width: '80%'
}
}
<Drawer
.....
containerStyle = {drawerStyle}
>
</Drawer>
代码仅适用于网络，在移动设备上无效。甚至CSS代码都不适用我已经在开发人员控制台中检查过。我正在使用 MUI 版本0.18.7。
任何帮助，将不胜感激。
PS：根据要求，我需要根据屏幕尺寸使用CSS.
通过使用主题的断点属性，您可以直接在您的组件中使用用于 Grid 和 Hidden 组件的相同断点。
应用程序接口
theme.breakpoints.up(key) => media query
参数
key (String | Number)：断点键（xs、sm 等）或以像素为单位的屏幕宽度数。
返回 媒体查询：准备与 JSS 一起使用的媒体查询字符串。
例子
const styles = theme => ({
root: {
backgroundColor: 'blue',
[theme.breakpoints.up('md')]: {
backgroundColor: 'red',
},
},
});欲了解更多信息，请查看
所以这就是你可以做的（快速破解）。但是，Material UI 会抱怨您进行了不必要的计算。
const styles = {
drawerWidth: {
width: '50%',
['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key
width: '80%'
}
}
}
您在媒体查询中有拼写错误。您应该使用以下语法，它会按预期工作：
const drawerWidth = {
width: '50%',
'@media (min-width: 780px)' : {
width: '80%'
}
}
代替
const drawerWidth = {
width: '50%',
'@media(minWidth: 780px)' : {
width: '80%'
}
}
对@Lipunov 的类似回答，基于@nbkhope 的评论
const styles = {
drawerWidth: {
width: '50%',
[theme.breakpoints.up(780)]: {
width: '80%'
}
}
}
我通过做这样的事情解决了这个问题：
const dropzoneStyles =
window.screen.availWidth < 780 ?
{ 'width': '150px', 'height': '150px', 'border': 'none', 'borderRadius': '50%' }
: { 'width': '200px', 'height': '200px', 'border': 'none', 'borderRadius': '50%' };
然后将其作为属性附加到 Material UI 元素中：
<Dropzone style={dropzoneStyles} onDrop={this.handleDrop.bind(this)}>
所以关键是使用window.screen.availWidth. 您将在render()函数中执行此操作。希望有帮助！