React中Material UI Modal无法正常工作，已参考官方示例

核心问题：Modal内容容器缺少基础样式 #

你的代码里给Modal内容容器加了className="modal"但未定义对应CSS样式，导致内容无可见背景、内边距等，即便定位正确也无法显示。此外还有几处细节需要修正：

具体修复步骤： #

1. 添加Modal内容容器的基础样式
   给.modal类补充必要样式，让内容可见：

   .modal {
     background-color: #fff;
     padding: 2rem;
     border-radius: 8px;
     max-width: 500px;
     width: 90%;
     outline: none; /* 移除默认焦点轮廓 */
   }
   

2. 缓存Modal定位样式
   用useState缓存getModalStyle的结果，避免每次渲染生成新随机位置导致的闪烁：

   const [modalStyle] = React.useState(getModalStyle);
   

   替换原代码中直接调用getModalStyle()的写法。

3. 补全未定义的变量与导入
   代码中Grid、tasks、getTask未导入或定义，会导致组件报错：

   • 导入Grid组件：import Grid from 'material-ui/Grid';
   • 确保tasks为传入的props或已定义变量
   • 实现getTask渲染任务的函数

4. 修正组件导出名称
   导出名称需与组件名一致，避免大小写错误：

   export default TaskDrawer;
   

修复后的完整代码示例 #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Modal from 'material-ui/Modal';
import Button from 'material-ui/Button';
import Grid from 'material-ui/Grid';

// 示例任务渲染函数
const getTask = (key, task) => (
  <Grid item key={key}>
    {task.title || '任务项'}
  </Grid>
);

const TaskDrawer = ({ action, tasks }) => {
  const [open, setOpen] = React.useState(false);

  function rand() {
    return Math.round(Math.random() * 20) - 10;
  }

  function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();

    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }

  const [modalStyle] = React.useState(getModalStyle);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <h1>Tasks</h1>
      <div>
        {action === "Find" && (
          <Button className="edit" onClick={handleOpen}>
            Edit
          </Button>
        )}
      </div>
      <Modal open={open} onClose={handleClose}>
        <div style={modalStyle} className="modal">
          <h2 id="simple-modal-title">Text in a modal</h2>
          <p id="simple-modal-description">test of a modal</p>
        </div>
      </Modal>
      <Grid container spacing={3}>
        {tasks ? Object.keys(tasks).map(k => getTask(k, tasks[k])) : null}
      </Grid>
    </div>
  );
};

TaskDrawer.propTypes = {
  action: PropTypes.string,
  tasks: PropTypes.object,
};

export default TaskDrawer;

额外提示 #

• 若使用Material UI v4及以上版本，建议改用@mui/material导入路径（如import Modal from '@mui/material/Modal';），旧版material-ui包已停止维护。
• 确保Modal内容容器设置outline: none，避免默认焦点边框影响视觉效果。

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