如何修改Office UI Fabric中DefaultButton的菜单项容器宽度？

嘿，我来帮你搞定这个问题！要修改DefaultButton里承载菜单项的容器（也就是ContextualMenu）宽度，有两种常用的方式，结合你的代码示例给你详细说：

方法一：通过menuProps直接自定义样式 #

你可以在menuProps里添加styles属性，直接覆盖ContextualMenu的容器样式。比如：

// 先定义你的menuProps
const menuProps = {
  items: [
    { key: 'item1', text: '菜单项1' },
    { key: 'item2', text: '菜单项2' }
  ],
  // 自定义菜单容器样式
  styles: {
    container: {
      width: 320, // 设置你想要的宽度，比如320px
      minWidth: 'unset' // 可选，移除默认的最小宽度限制
    }
  }
};

// 然后传入DefaultButton
<DefaultButton
  text="New item"
  iconProps={addIcon}
  menuProps={menuProps}
  menuAs={_getMenu}
  onMenuClick={_onMenuClick}
  allowDisabledFocus
  disabled={disabled}
  checked={checked}
/>

这里的container样式对应的就是承载菜单项的核心容器，设置width就能直接调整它的宽度；如果默认的最小宽度限制了你的调整，加上minWidth: 'unset'就能解除。

方法二：通过menuAs自定义菜单组件时设置样式 #

既然你的代码里已经用到了menuAs={_getMenu}来自定义菜单渲染，那可以直接在自定义的ContextualMenu组件里设置样式：

const _getMenu = () => {
  return (
    <ContextualMenu
      items={[
        { key: 'item1', text: '菜单项1' },
        { key: 'item2', text: '菜单项2' }
      ]}
      styles={{
        container: {
          width: 350 // 这里设置目标宽度
        }
      }}
    />
  );
};

这种方式更灵活，如果需要对菜单做更多自定义调整，都可以在这个自定义组件里完成。

小提示 #

如果遇到样式不生效的情况，可以试试同时设置root和container的样式，比如：

styles: {
  root: { width: 300 },
  container: { width: '100%' }
}

不同版本的Office UI Fabric可能对层级样式的命名略有差异，多试一下就能找到适合的。

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