Reactjs 如何使用breakpoint.value

我有一个监控员工的网站，我希望这个网站能够“响应”，这意味着它可以在所有设备上运行

举个简单的例子：

如果您想对“sm，xs”屏幕做出响应，可以通过以下说明进行：

[theme.breakpoints.down('sm')]: {
            -------------
            //some css code
        }

但我有这个问题。问题是在浏览器上测试站点时。我们发现从“xs”到“sm”，它是一组设备，它们是：

    Moto G4----> size:360
    Galaxy S5 ----> size:360
    Pixel2 ----> size:411
    etc

现在的问题是，我如何分别处理这些屏幕的每种类型， 也就是说，如何处理大小为“411”等的屏幕

我试过这个：

  [theme.breakpoints.down(411)]: {
                -------------
                //some css code
            }

但它不起作用。

hotpink:{
“@media（最小宽度：411px）”：{
颜色：'热粉色'，
},
},

constmycomponent=（）=>{
const classes=useStyles（）；
打招呼
}

---

如果您需要监听组件中的媒体查询值，可以使用。

这是否回答了您的问题？不，我需要用材质ui制作这个。我编辑我的帖子>