如何安装 Fluent UI React 和 remix run？我相信这个问题非常重要，需要在这里解决，因为它是社区采用 office-UI-fabric-react 的绊脚石。

我有一种情况，我想在FluentUI DetailsList中显示数据，其中列名可能很长，而列内容可能很窄。在这种情况下，标头将被截断。 请参阅此代码笔。

有什么方法可以改变这种行为，使标题文本换行多行？

虽然我在 2 年前就发现了这个悬而未决的问题，但我在 Stackoverflow、Github 或官方文档上都找不到该主题的答案。以下是我尝试过的一些方法：

• word-break: break-all;通过headerClassName以下字段注入 CSS 类IColumn
• isMultiLine列上的设置
• DetailsHeader我可以覆盖其渲染的组件本身似乎onRenderDetailsHeader没有提供任何用于自定义文本显示方式的道具

是否有一种方法可以实现所需的行为（换行多行而不是截断长列标题）？

我目前正在尝试在 FluentUI/react-northstar Dropdown 组件的帮助下制作一个下拉菜单。不幸的是，items这个组件的 prop 在下拉列表中只有一个string[]用于渲染名称，但我key也需要一个。

我尝试通过renderItem添加自定义渲染器来实现此目的：

<Dropdown
    renderItem = (Component: React.ElementType, props: any): React.ReactNode => {
      ...
      return <Component key={props.key} content={props.name} />;
    };
    items={dropDownMapper(displayTree[0], 0)}
    ...
/>

该dropDownMapper函数返回一个对象数组，如下所示：[{key: string, name: string}, ...]

这样我就可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我尝试添加onClickto <Component/>，但由于我使用该框架，我不确定<Dropdown/>单击该项目时期望我做什么，并且文档并没有真正的帮助。

不确定这个问题是否适合这个论坛，但我找不到其他地方。

我们的设计团队基于流畅的 ui 库构建了他们的设计系统，如此处所述。他们从这里下载了设计。

不幸的是，我们的工程团队正在使用 Angular，因此我们自然而然地选择了 Web组件，但令我们惊讶的是，该库完全不同——不同的组件集、功能，当然还有完全不同的设计。

我认为所有的 Fluentui 平台都应该是相同设计的实现/接口。为什么情况并非如此？我缺少什么？

有没有一种方法可以在 Angular 中使用此处描述的设计？（除了在我的 Angular 项目中实际使用 React 库）。

感谢您的帮助，如果这个问题不适合本论坛，我们深表歉意。

TL; 博士

这有效：https : //codesandbox.io/s/stoic-beaver-ucydi

使用 React Hook Form 重构后，这不起作用：https ://codesandbox.io/s/objective-cloud-bkunr?file=/src/ControlledTextField.tsx

很长的故事

没有 React Hook 表单（工作正常）

我最近使用Fluent UI构建了一个有状态的 React 表单，并将字段包装在自定义组件中。

我已经包含了一个功能，当您在站点标题字段中键入时，会生成站点 URL 字段中的值（在我的情况下，它只是复制字段值并删除对 URL 无效的字符）。

（简化的）代码运行良好，如下所示：

import * as React from 'react';
import {useState} from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';
import SiteTitleField from '../../../common/formFields/SiteTitleField';
import SiteUrlField from '../../../common/formFields/SiteUrlField';

export default function MyForm(props) {

  const urlPrefix: string = "https://" + window.location.hostname + "/sites/";

  const [siteTitle, setSiteTitle] = useState();
  const [titleErrorMessage, setTitleErrorMessage] = useState('');

  const [siteUrl, …