如何将Fluent UI Dialog组件DialogFooter内的按钮居中对齐？

要解决DialogFooter里按钮无法居中的问题，其实只需要调整DialogFooter内部的布局样式就行，我给你整理了三种简单有效的实现方式：

方法一：覆盖DialogFooter的默认样式（推荐） #

Fluent UI的DialogFooter内部有一个名为actions的容器，默认是靠右对齐的。我们可以通过styles属性直接覆盖这个容器的布局规则：

<DialogFooter styles={{ actions: { justifyContent: 'center' } }}>
  <PrimaryButton onClick={toggleHideDialog} text="Save" />
</DialogFooter>

这个方法最直接，完全利用Fluent UI的样式体系，不会引入额外的DOM元素。

方法二：用自定义容器包裹按钮 #

如果需要更灵活的布局控制，可以在按钮外面套一个占满宽度的flex容器，手动设置居中：

<DialogFooter>
  <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
    <PrimaryButton onClick={toggleHideDialog} text="Save" />
  </div>
</DialogFooter>

这种方法适合需要在按钮周围添加额外元素（比如文字、图标）的场景，能自由控制整个区域的布局。

方法三：使用Fluent UI Stack组件 #

Fluent UI提供了专门的Stack布局组件，用它来实现居中非常直观：

首先导入Stack组件：

import { Stack } from 'office-ui-fabric-react/lib/Stack';

然后在DialogFooter中使用：

<DialogFooter>
  <Stack horizontalAlign="center" style={{ width: '100%' }}>
    <PrimaryButton onClick={toggleHideDialog} text="Save" />
  </Stack>
</DialogFooter>

Stack组件的horizontalAlign="center"属性会自动让内部元素水平居中，加上width:100%确保占满DialogFooter的宽度。

修改后的完整示例代码（使用方法一） #

import * as React from 'react';
import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { useBoolean } from '@uifabric/react-hooks';

const modelProps = { isBlocking: true, topOffsetFixed: true, };

const options = [
  { key: 'A', iconProps: { iconName: 'CalendarDay' }, text: 'Day', },
  { key: 'B', iconProps: { iconName: 'CalendarWeek' }, text: 'Week', },
  { key: 'C', iconProps: { iconName: 'Calendar' }, text: 'Month', },
];

export const DialogTopOffsetFixedExample: React.FunctionComponent = () => {
  const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
  const [optionSelected, setOptionSelected] = React.useState('A');

  const onChange = (ev: React.FormEvent<HTMLInputElement>, option: any): void => {
    setOptionSelected(option.key);
  };

  return (
    <>
      <DefaultButton secondaryText="Opens the Sample Dialog" onClick={toggleHideDialog} text="Open Dialog" />
      <Dialog hidden={hideDialog} onDismiss={toggleHideDialog} modalProps={modelProps}>
        <ChoiceGroup label="Pick one icon" options={options} // eslint-disable-next-line react/jsx-no-bind
          onChange={onChange} required />
        {optionSelected === 'A' && (
          <div>
            <h1>Description</h1>
            <div>
              {' '}
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{' '}
            </div>
          </div>
        )}
        {optionSelected === 'B' && (
          <div>
            <h1>Description</h1>
            <div>
              {' '}
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
            </div>
          </div>
        )}
        {optionSelected === 'C' && (
          <div>
            <h1>Description</h1>
          </div>
        )}
        {/* 这里是修改的核心部分 */}
        <DialogFooter styles={{ actions: { justifyContent: 'center' } }}>
          <PrimaryButton onClick={toggleHideDialog} text="Save" />
        </DialogFooter>
      </Dialog>
    </>
  );
};

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