相关疑难解决方法(0)

我Material-ui在ReactJs项目中使用组件,由于某种原因,我需要在某些组件中进行自定义,以使其根据屏幕宽度进行响应.

我添加media query并将其作为样式属性传递给组件但不工作,任何想法？

我正在使用这样的代码

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

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

代码仅适用于网络,在移动设备上没有任何影响.甚至css代码没有申请我已经检查了dev.安慰.我正在使用material-ui版本0.18.7.

任何帮助,将不胜感激.

PS:根据要求,我需要根据屏幕大小使用CSS进行一些更改.

我想imageList根据显示宽度（又称媒体查询）减少列数，但它无法正常工作。例如：

<ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={18}>
  {images.map((image) => (
    <ImageListItem key={image.id}>
      <img
        src={image.urls.regular}
        srcSet={image.urls.regular}
        alt={image.alt_description}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

如果我这样做，我只会得到 1 列，如果我尝试cols={3}，我会得到 3 列。有小费吗？