Как я могу изменить ширину контейнера элементов в DefaultButton?

Question

HI Я использую элемент управления DefaultButton из office-ui-fabric и хочу изменить ширину контейнера, содержащего элементы меню.

, как в примере ниже. 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 , в частности могут использоваться следующие свойства:

• container Стиль для контейнера, которыйвсе родительские элементы меню

• root Базовые стили для корневого элемента всех ContextualMenus

Пример

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} />;
  };
}

Результат