问题标签 [fluent-ui]

我正在使用 flexbox 和 Microsoft 的fluent ui “堆栈”抽象来在我的 React 应用程序的页面上显示视频卡。顾名思义，我正在使用flex-wrap并在每个项目之间保持相等的空间。space-between当页面上存在大量项目时，这看起来很完美。

但是，当您刚开始添加项目时，您要添加第二个项目，而不是将项目放在第一个视频卡的右侧 - 与页面左侧对齐 - 第二个项目放在行的最右边。然后第三个项目是 1 和 2 距离的一半——所以它被放置在行的正中间。

我的问题是，如何让第二个项目——然后是第三个，等等——放在前一个项目的右侧，直到该行已满，此时它换行到一个新行并且同样的事情再次发生？

这是我的代码：

换句话说，当我添加第二项时，我得到的是这样的：

...当我想要的是这样的东西时：

而且我猜测它需要在幕后工作的方式是，每个项目之间的空间是否需要根据你可以在一行中容纳的最大项目数来计算？

这是 flexbox 设计用来处理的场景吗？或者这比我意识到的更复杂？注意：如果还不是很明显，每个视频卡的尺寸将完全相同。所以，在我的用例中，我知道我可以在一行中放置 7 个视频卡，然后再换到下一行。我宁愿将一行中的项目放在一起，而不是最初放在行的两端。

我开始将 FluentUI 与 React 一起使用，并且我正在尝试修改 Panel 组件。我有这个代码：

但是样式 = {panelStyles} 给了我以下错误： 预期的类型来自属性 'styles'，它在类型 'IntrinsicAttributes & IPanelProps & { children?: ReactNode; }'

默认面板在左侧打开，我希望它在打开时位于屏幕中央。

我有一个带有标注组件的反应应用程序，如果我不对其应用任何样式，它看起来非常正常。它的指针完美地指向一个过滤器按钮

但是，当我尝试隐藏它（应用 display:none 到它）并取消隐藏它时，标注回来扭曲，指针被撕掉

有人可以建议如何解决这种失真吗？

非常感谢您！

隐藏样式简单的地方显示：无

我会将组件呈现为标签内容而不是字符串。

实际上我收到了这个错误：

“Box”组件的简写 prop 传递了一个 JSX 元素，但该插槽仅支持字符串|数字|对象|数组|ReactElements。

称为组件作为道具。

如何将组件（带道具）传递为content？

问题再现

使用 Fluent UI DetailsList，我创建了这个解决方案。我已经删除了所有不必要的行以最小化问题，因为它似乎在登录时以onColumnClick某种方式不会打印当前状态而是初始状态，为什么会发生这种情况：

列.tsx

在那里面

我正在尝试在我的 React 应用程序的视频卡中使用上传图标的背景图像，但到目前为止还无法显示背景图像。我看到了我声明的背景颜色，但没有看到背景图像，我不知道为什么。这是相关的代码块：

我还尝试拉图标是一个导入，如下所示：

...然后像这样使用它：

但这也没有用。

顺便说一句，我backgroundImageCardSectionStyles上面提到的看起来像这样：

我在这里想念什么？

有没有办法在单击时突出显示整个列或至少是 DetailsList 中的标题，条件是一次只能选择一列？

更改“onColumnHeaderClick”中的类是可行的，但是如果选择了另一列，它不会使这些列处于非活动状态。

感谢大家。

我在 2 小时前开始学习 React 和 FluentUI。我正在尝试互联网上提供的各种教程，但不能仅仅通过 FluentUI 包安装步骤。我收到以下错误：

我尝试卸载 react 并安装 react@16.14.0，但这无济于事，因为还有其他依赖于 react@17.0.1 的包。我能做些什么？

我是我的“office-ui-fabric-react”项目之一，我正在编写一个实用程序类（common.ts），其中我有一个为页面加载主题的功能。此实用程序类将作为脚本标记的一部分包含在 html 文件中，如 common.js。

我想调用在 \node_modules@uifabric\styling\lib\styles\node_modules@uifabric\styling\lib\styles\theme.d.ts 中定义的 loadTheme

我尝试import { loadTheme } from "office-ui-fabric-react"并给了我一个通用的构建错误。

如何从 .t​​s 文件导入“office-ui-fabric-react”中定义的 API？

我想根据存储在 redux 中的值在Input上设置默认值。

我在这篇文章中看到 defaultValue 仅用于第一次渲染。

所以我尝试使用，value然后问题是我无法改变它的价值。

这是一个例子