如何在DefaultButton中更改项目容器的宽度？

Question

您好，我正在使用DefaultButton控制从办公室-ui-面料，并希望更改容器的宽度，其中包含菜单项。

就像在下面的例子中，DefaultButton包含两个项目，所以我想改变显示两个项目的容器的宽度。

<DefaultButton
      text="New item"
      iconProps={addIcon}
      menuProps={menuProps}
      // Optional callback to customize menu rendering
      menuAs={_getMenu}
      // Optional callback to do other actions (besides opening the menu) on click
      onMenuClick={_onMenuClick}
      // By default, the ContextualMenu is re-created each time it's shown and destroyed when closed.
      // Uncomment the next line to hide the ContextualMenu but persist it in the DOM instead.
      // persistMenu={true}
      allowDisabledFocus
      disabled={disabled}
      checked={checked}
    />

Answer 1

可以通过menuProps.styles property覆盖按钮菜单样式，特别是可以利用以下属性：

作为所有菜单的父对象的容器的

• container样式所有ContextualMenus

的根元素的items

• root基本样式

示例

import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react";
import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
import * as React from "react";

export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
  public render(): JSX.Element {

    return (
      <div>
        <DefaultButton
          data-automation-id="test"
          allowDisabledFocus={true}
          iconProps={{ iconName: "Add" }}
          menuAs={this.getMenu}
          text="New"
          // tslint:disable-next-line:jsx-no-lambda
          onMenuClick={ev => {
            // tslint:disable-next-line:no-console
            console.log(ev);
          }}
          menuProps={{
            items: [
              {
                iconProps: { iconName: "Mail" },
                key: "emailMessage",
                text: "Email message"
              },
              {
                iconProps: { iconName: "Calendar" },
                key: "calendarEvent",
                text: "Calendar event"
              }
            ],
            styles: {
              root: {
                width: "540px"
              }
            }
          }}
        />
      </div>
    );
  }

  private getMenu = (menuProps: IContextualMenuProps): JSX.Element => {
    // Customize contextual menu with menuAs
    return <ContextualMenu {...menuProps} />;
  };
}

结果

​

​