Office UI结构JS Dropdown组件在单击时未加载正确的样式

Question

我正在使用带有Office UI fabric js UI组件的Outlook加载项。我有使用下拉列表的问题。

点击下拉列表时，它不会显示下拉列表样式，而是打开一个包含选项的完整新面板。

我按照此link添加了下拉组件。

Answer 1

dropdown组件具有一个名为responsiveMode的道具。这决定了container is rendered的方式。

如您所见，对于ResponsiveMode.medium及以下版本，将渲染Panel，否则将为Callout。您想要的是Callout。

您只需传递道具ResponsiveMode.large即可呈现您想要的方式。

import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { ResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';

render() {
  return (
    <Dropdown
      label='My Label'
      options={myOptions}
      responsiveMode={ResponsiveMode.large}
    />
  );
}