Material-UI从beta升级至rc1后Dialog/Popover初始隐藏问题求助

我刚将Material-UI从beta版本升级至rc1版本，代码编译运行正常，但Dialog、Popover等组件初始化时被CSS类设置了visibility:hidden属性，导致初始状态为隐藏。其中Dialog组件被应用了.MuiModal-hidden-224类，其根节点HTML结构如下：

<div class="MuiModal-root-223 MuiDialog-root-216 MuiModal-hidden-224" role="dialog"> </div>

以下是我使用的React代码：

import * as React from "react"; 
import "./SharingDialog.less"; 
import Dialog from "@material-ui/core/Dialog"; 
import Button from "@material-ui/core/Button"; 

interface IProps { 
  locked: boolean 
} 

interface IState { 
  open: boolean; 
  anchorEl: any; 
} 

export default class SharingDialog extends React.Component<IProps, IState> { 
  constructor(props: IProps) { 
    super(props); 
    this.state = { 
      open: false, 
      anchorEl: null 
    } 
  } 

  handleOpen = (event:any) => { 
    this.setState({open: true, anchorEl: event.currentTarget}); 
  } 

  handleClose() { 
    this.setState({open: false}) 
  } 

  render() { 
    const { locked } = this.props; 
    return ( 
      <div className="sharing-dialog"> 
        <Button>Test</Button> 
        <button disabled={!locked} className="btn btn-primary" onClick={(event) => this.handleOpen(event)}>Open modal</button> 
        <Dialog open={this.state.open}> 
          <div className="sharing-dialog-component"> 
            Testing 
          </div> 
        </Dialog> 
      </div> 
    ) 
  } 
} 

请问我哪里操作有误？为何模态框初始状态为隐藏？

问题分析与解决方案 #

其实你遇到的这个现象在Material-UI RC1版本里是预期行为，可能是版本升级后的逻辑变化让你产生了困惑，我们来一步步拆解：

1. MuiModal-hidden类的作用
   在Material-UI从beta到RC1的迭代中，Modal（Dialog的底层依赖组件）的显示/隐藏逻辑做了调整：当open属性为false时，组件会自动添加MuiModal-hidden类，通过visibility: hidden来隐藏模态框。这是框架内置的状态控制机制，目的是在模态框未激活时保持DOM存在但不可见，避免频繁挂载/卸载DOM带来的性能损耗。

2. 你的代码逻辑问题
   看你的组件初始化状态：

   this.state = { 
     open: false, 
     anchorEl: null 
   }
   

   你把open初始设为了false，所以Dialog组件会自动应用MuiModal-hidden类，初始隐藏完全符合预期。如果你的需求是让Dialog默认显示，只需要把初始状态的open改为true即可：

   this.state = { 
     open: true, 
     anchorEl: null 
   }
   

3. 按钮点击后的异常排查（如果存在）
   如果你是发现点击“Open modal”按钮后Dialog仍然不显示，那需要检查两个点：

   • 确认locked props是否为true：因为你的按钮设置了disabled={!locked}，如果locked是false，按钮会处于禁用状态，点击事件根本不会触发。
   • 检查状态更新是否生效：可以在handleOpen里加日志验证，确认点击后state.open是否真的被设为true，比如：

     handleOpen = (event:any) => { 
       console.log("Button clicked");
       this.setState({open: true, anchorEl: event.currentTarget}, () => {
         console.log("Updated open state:", this.state.open);
       }); 
     }
     

   如果状态更新正常但Dialog还是不显示，那可能是自定义的SharingDialog.less样式覆盖了Material-UI的默认样式，你可以暂时注释掉这个样式导入，测试是否能正常显示。

总结一下：初始隐藏是因为你设置了open初始值为false，这是RC1版本的正常逻辑；如果有点击后不显示的问题，重点排查按钮禁用状态和样式冲突。

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