React Material UI 如何调整Dialog最大宽度

 时间:2026-02-12 15:33:31

1、首先,最终效果如图所示,设定Dialog最大宽度为900px以后,不再受限于默认的600px。

React Material UI 如何调整Dialog最大宽度

2、而在修改最大宽度之前如图所示,内容超过600px宽后会被折行显示。

React Material UI 如何调整Dialog最大宽度

3、要完成该修改,首先import如图的Paper和Styled。接着用styled函数创建一个改写max-width的Paper组件。

React Material UI 如何调整Dialog最大宽度

4、接着,在编写render函数时,设定其中的Dialog的PaperComponent。这样就可以了。

React Material UI 如何调整Dialog最大宽度

5、在此说明一种常见错误,是修改dialog本身的max-width。

React Material UI 如何调整Dialog最大宽度

6、这样得到的效果是Dialog无法铺满全屏,会靠左侧。而实际上Dialog需要全屏,只是其中的Paper组件居中。

React Material UI 如何调整Dialog最大宽度

1、首先,最终效果如图所示,设定Dialog最大宽度为900px以后,不再受限于默认的600px。


2、而在修改最大宽度之前如图所示,内容超过600px宽后会被折行显示。
3、要完成该修改,首先import如图的Paper和Styled。接着用styled函数创建一个改写max-width的Paper组件。
4、接着,在编写render函数时,设定其中的Dialog的PaperComponent。这样就可以了。
5、在此说明一种常见错误,是修改dialog本身的max-width。
6、这样得到的效果是Dialog无法铺满全屏,会靠左侧。而实际上Dialog需要全屏,只是其中的Paper组件居中。
  • 机械动物的镜头哪里出
  • 炎妃龙怎么解锁
  • 怪物猎人世界炎王龙弱点攻略
  • 怪物猎人世界pc喷气大剑怎么获得
  • 怪物猎人中装饰品怎么出售
  • 热门搜索
    如何修复硬盘 六零年代好生活 人工荨麻疹怎么治疗 窦性心动过缓是什么意思 怎么截图啊 门可罗雀是什么意思 欠款不还怎么办 海带怎么煮烂 淘宝快捷支付怎么开通 家长如何教育高中生