fluentui下拉列表不适用于创建反应应用

Question

我在计算机上创建了一个创建反应项目。

我在项目目录终端中运行npm i @fluentui/react以安装流利的UI软件包。

我有简单的代码显示下拉列表，所有正确的导入都

import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '@fluentui/react/lib/Dropdown';

const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: 300 },
};

const options: IDropdownOption[] = [
  { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange', disabled: true },
  { key: 'grape', text: 'Grape' },
  { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
  { key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

function App() {
  return (
    <div className="App">
     <Dropdown
        placeholder="Select an option"
        options={options}
        styles={dropdownStyles}
      />
    </div>
  );
}

显示的是一个奇怪的框，没有可单击的下拉列表。

我进行了一些研究，需要导入图标，因此我在项目中添加了此类代码。

import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons();

现在，下拉列表显示了正确的图标，但是没有发生任何图标。

奇怪的是，当屏幕尺寸为平板电脑尺寸时，下拉台将显示为上下文窗格，但不会显示以全屏模式出现

ive搜索了，但尚未找到任何答案。任何帮助将不胜感激！

Answer 1

如果我了解很好，您想禁用响应模式：

import { ResponsiveMode } from '@fluentui/react'

<Dropdown
  ...
  responsiveMode={ResponsiveMode.unknown}
/>

codepen> codepen 工作示例。

Answer 2

如果您有＆lt; react.strictmode＆gt;在您的index.tsx中，您可以删除此操作，然后可以使用（至少在我遇到同样的问题时）。