如何让Fluent UI Modal始终与屏幕保持内边距不占满全屏？

要让Modal始终与屏幕保持内边距，避免在浏览器放大或低分辨率屏幕下占满全屏，可通过以下几种方式实现：

方法1：自定义Modal根容器样式 #

通过Modal组件的styles属性，为根容器设置最大尺寸、居中规则，直接限制Modal与屏幕边缘的间距：

import { Modal, PrimaryButton, DefaultButton } from '@fluentui/react';

// 定义Modal样式
const modalStyles = {
  main: {
    maxWidth: 'calc(100vw - 48px)', // 左右各保留24px内边距
    maxHeight: 'calc(100vh - 48px)', // 上下各保留24px内边距
    margin: 'auto', // 让Modal在屏幕中居中
  },
};

// 使用样式的Modal组件
<Modal
  isOpen={true}
  styles={modalStyles}
  onDismiss={() => {}}
>
  {/* 你的Modal内容：标题、文本、按钮等 */}
  <div style={{ padding: '20px' }}>
    <h3>示例对话框</h3>
    <p>这是对话框的内容区域</p>
    <PrimaryButton text="确认" onClick={() => {}} />
    <DefaultButton text="取消" onClick={() => {}} />
  </div>
</Modal>

这种方式通过calc计算出固定的内边距，比百分比更精准，同时确保Modal不会超出屏幕范围。

方法2：限制Modal内容的最大宽度 #

如果不需要限制Modal的高度，仅需控制宽度与屏幕的间距，可以直接给Modal内部的内容容器设置最大宽度和内边距：

<Modal
  isOpen={true}
  onDismiss={() => {}}
>
  <div style={{ 
    padding: '24px', 
    width: '100%', 
    maxWidth: '800px', 
    margin: 'auto' 
  }}>
    {/* 你的Modal内容 */}
  </div>
</Modal>

这种方式让Modal的背景区域可以自适应，但内容区域始终保持最大800px宽度，且左右居中，间接实现了与屏幕的内边距。

方法3：适配Fluent UI v9版本 #

如果使用的是Fluent UI v9，API有所调整，直接通过style属性设置即可：

import { Modal } from '@fluentui/react-components';

<Modal
  open={true}
  onOpenChange={() => {}}
  style={{
    maxWidth: 'calc(100vw - 48px)',
    maxHeight: 'calc(100vh - 48px)',
    margin: 'auto'
  }}
>
  {/* 内容区域 */}
</Modal>

注意事项 #

• 确保未设置isFullScreen（v8）或fullScreen（v9）属性为true，该属性会强制Modal占满全屏；
• 若需要更灵活的响应式适配，可以结合媒体查询调整不同屏幕尺寸下的最大宽度。

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