相关疑难解决方法(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进行一些更改.

我最近开始在我的 React 项目中使用 MUI。有两个布局组件我很困惑，即 Stack 和 Box

我什么时候应该使用 Stack 而不是 Box？

我知道盒子的用途。

但我不确定何时使用 Stack 组件以及它们之间的区别是什么？

从 v4迁移到 v5指南指出：

系统Boxprops 在 v5 中有一个可选的替代 API，使用sxprop. 您可以阅读本节了解这个新 API 背后的“原因”。

<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>

Run Code Online (Sandbox Code Playgroud)

所提到的部分表明：

将系统置于一个 prop ( sx) 下有助于区分仅为 CSS 实用程序而定义的 props 与为组件业务逻辑而定义的 props。这对于关注点分离很重要。

但是说到性能，这两种方式都属于性能权衡d. Render 1,000 Box中的基准项吗？或者使用系统属性和prop之间有什么区别吗？sx