为何MUI组件sx属性设置display: none无法隐藏Drawer组件？

问题原因 #

你当前使用的MUI 4.12.1属于v4版本，并不支持sx属性，sx是MUI 5.0版本之后才推出的快捷样式配置属性，因此你写在sx中的所有样式规则都不会生效，这就是哪怕你直接设置display: 'none'抽屉也正常显示的核心原因。

解决方案 #

你可以选择以下任意一种适配MUI 4的方式实现响应式抽屉效果：

方案1：通过useMediaQuery钩子动态控制display #

使用MUI 4内置的useMediaQuery钩子匹配断点，直接通过style属性控制显示状态：

import { useMediaQuery, useTheme } from '@material-ui/core';
import Drawer from '@material-ui/core/Drawer';

function App() {
  const theme = useTheme();
  // 匹配宽度≥sm断点的屏幕
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));

  return (
    <Drawer
      variant="permanent"
      style={{
        display: isSmUp ? 'block' : 'none'
      }}
      open
    >
      Hello There
    </Drawer>
  );
}

方案2：动态切换variant属性优化交互体验 #

如果希望小屏用临时抽屉、大屏用永久固定抽屉，直接切换variant属性比单纯控制display的交互体验更好：

import { useState } from 'react';
import { useMediaQuery, useTheme } from '@material-ui/core';
import Drawer from '@material-ui/core/Drawer';

function App() {
  const theme = useTheme();
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
  // 控制小屏临时抽屉的开关状态
  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);

  return (
    <Drawer
      variant={isSmUp ? 'permanent' : 'temporary'}
      open={isSmUp ? true : mobileDrawerOpen}
      onClose={() => setMobileDrawerOpen(false)}
    >
      Hello There
    </Drawer>
  );
}

方案3：使用makeStyles定义响应式类名 #

如果你偏好通过类名控制样式，可以使用MUI 4的makeStyles定义断点规则：

import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const useStyles = makeStyles(theme => ({
  responsiveDrawer: {
    // 宽度<sm断点时隐藏
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  }
}));

function App() {
  const classes = useStyles();
  return (
    <Drawer
      variant="permanent"
      className={classes.responsiveDrawer}
      open
    >
      Hello There
    </Drawer>
  );
}

内容的提问来源于stack exchange，提问作者apc518