0

我正在使用 SPFx 附带的 Office UI Fabric React。它的版本是 6.214.0。我有一个如下所示的下拉列表：

<Dropdown placeholder={strings.Position} label="" options={positionOptions} onChange={(e, option) => setPosition(option.text)} styles = {dropdownStyles} className={styles.dropDown}/>

styles.dropDown 具有以下样式：

.dropDown{
  float: left; 
  margin-right: 15px; 
}

这些值是根据 Web 服务动态填充的。但是下拉宽度不适合里面的项目。

在此处输入图像描述

如果我删除左边的浮动，它们都将占用 100% 的宽度。

我们如何使用 UI Fabric React 实现这一点？

4

2 回答 2

0

标注宽度可以通过向页面添加类来覆盖。自动宽度确保标注宽度将由其内容确定。

.ms-Callout {
    width: auto;
    min-width: 150px;
}
于 2021-07-23T03:09:23.420 回答
-1

我建议使用styles道具。您可以设置组件的样式root以及输出的各个方面，例如标注、thedropdownItem等label。许多 Fluent UI / office-ui-fabric-react 组件都有这个styles属性——它们为你提供了明确定义的元素，你可以覆盖它们的样式设置。

您float实际上可能会导致此问题。浮动将元素从正常的渲染流程中取出 - 并且可能会破坏 Dropdown 组件根据其子项的宽度调整其标注大小的能力。您可以在MDN Web Docs上了解 float 的实际作用。

在第一种情况下，我建议删除您的float: left声明，看看是否可以改善情况。如果这不起作用，我会尝试将 a应用于道具minWidth中的一个可用键- 也许是元素。stylesdropdownItem

于 2021-04-21T01:59:55.223 回答