如何在 Fluent UI 中使 Pivot header 居中？

Question

我想在 Fluent 中使用枢轴 UI 来显示菜单。

<Pivot linkSize={PivotLinkSize.large}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>

显示如下：

但是我想让PivotHeader居中，我试过改变styles属性，但是没有任何进展。

如何将枢轴 Header 居中对齐？

Answer 1

如果您希望所有按钮都水平居中，只需将 Pivot 设为 flexbox 并将其所有项目居中：

<Pivot linkSize={PivotLinkSize.large}
       styles={{ root: { display: 'flex', justifyContent: 'center' } }}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>

如何在 Fluent UI 中使 Pivot header 居中？

How to center a Pivot header in Fluent UI?

office-ui-fabric

fluent-ui