MUI中PaperProps无法识别xs、md等断点问题排查

我尝试通过xs、md等断点设置Material UI Dialog组件PaperProps中style的minHeight以适配不同屏幕尺寸，但该断点配置完全不生效，请问哪里操作有误？

我的代码：

<Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
        PaperProps={{
          style: {
            margin: 0,
            width: '100%',
            minHeight: {xs: '100%', md:'0%'},
            maxWidth: 800,
            backgroundColor: "#2c3059",

          },
        }} />

你写的{xs: '100%', md:'0%'}是Material UI特有的响应式断点语法，但原生HTML元素的style属性只接受普通键值对形式的CSS样式，不支持这种对象形式的断点配置，所以完全不生效。

给你三种可行的修复方案：

方案1：改用MUI的sx属性（最推荐） #

sx是MUI专属的样式属性，原生支持断点语法，把style换成sx即可：

<Dialog
  open={open}
  TransitionComponent={Transition}
  keepMounted
  onClose={handleClose}
  aria-describedby="alert-dialog-slide-description"
  PaperProps={{
    sx: {
      margin: 0,
      width: '100%',
      minHeight: { xs: '100%', md: '0%' },
      maxWidth: 800,
      backgroundColor: "#2c3059",
    },
  }}
/>

方案2：用useMediaQuery手动判断断点 #

如果偏好原生style，可以结合MUI的钩子动态设置样式：

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

// 在组件内部定义
const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.only('xs'));

// 然后修改Dialog的PaperProps
<Dialog
  open={open}
  TransitionComponent={Transition}
  keepMounted
  onClose={handleClose}
  aria-describedby="alert-dialog-slide-description"
  PaperProps={{
    style: {
      margin: 0,
      width: '100%',
      minHeight: isXsScreen ? '100%' : '0%',
      maxWidth: 800,
      backgroundColor: "#2c3059",
    },
  }}
/>

方案3：自定义Styled Paper组件 #

如果用styled-components这类CSS-in-JS方案，可以直接写媒体查询：

import styled from 'styled-components';
import { Paper } from '@mui/material';

const StyledDialogPaper = styled(Paper)`
  margin: 0;
  width: 100%;
  max-width: 800px;
  background-color: #2c3059;

  /* xs断点下的样式 */
  @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
    min-height: 100%;
  }

  /* md及以上断点的样式 */
  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
    min-height: 0%;
  }
`;

// 使用自定义组件替换默认Paper
<Dialog
  open={open}
  TransitionComponent={Transition}
  keepMounted
  onClose={handleClose}
  aria-describedby="alert-dialog-slide-description"
  PaperComponent={StyledDialogPaper}
/>

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