问题标签 [office-ui-fabric-react]

我正在使用定制器组件将特定主题和样式应用于我的 Fabric/Fluent 组件。

我还想从定制器属性中定制图标。

在Customizer 组件源代码中有一段文字说明：

Customizer 组件允许将默认道具混合到使用 custom() 装饰器装饰的组件中，或者使用样式化的 HOC。这启用了注入场景，例如：

1. 渲染 svg 图标而不是所有按钮中的图标字体
2. 将自定义主题对象注入组件

这是否意味着可以更改定制器道具中的图标？

我创建了一个CodePen来说明我的问题。

我有两个带有 iconProps 的 DefaultButtons。我想使用定制器来更改第二个按钮的图标，但只更改样式。

是否有可能做到这一点？

将鼠标悬停在 Pivot 中的各个按钮上时是否可以添加叠加层？

例如，当我将鼠标悬停在“搜索”图标上时，我想显示覆盖文字“搜索”。我曾尝试使用 react-bootstrap 中的 OverlayTrigger，但如果 PivotItem 标签被包围，它将不会显示在 Pivot 中。我还尝试了 PivotItem 标记中的 onMouseEnter 函数，但是当鼠标悬停在此枢轴显示的组件而不是枢轴中的图标时会调用该函数。

有任何想法吗？

我正在创建一个使用 Microsoft fluent-ui lib 的电子应用程序。我已经添加了对@fluentui/react": "^7.107.1package.json 文件的引用。然后当我像这样创建一个下拉列表时

<Dropdown label='Time zone' onChange={(e, option) => this.updateTimeZone(..)} />

带有下拉图标的插入符号丢失。

在检查元素时，与文档中的示例相比，似乎 i-tag 是空的并且没有在 css-class 中应用正确的字体。

有人可以看到我做错了什么吗？

有什么方法可以让我的@fluentui/react“DetailsList”的列标题在向下滚动时始终显示在顶部？

是否有另一个 @fluentui/react 可以做到这一点？

谢谢

I'm currently using the MS Fluent UI controls (formerly known as Office Fabric UI | https://developer.microsoft.com/en-us/fluentui#/controls/web) and I'm getting stuck with the 'Modal' control.

I am triggering a Modal dialog control as the onClick event for a DocumentCard control. The problem is I can't see any way to keep the new model dialog centred on the screen.

It appears to always center on the element which contains all of the document cards (and there are a lot of cards.. so you end up having to scroll down quite a lot to see the modal dialog).

Is there any way of simply setting it to "center on the (visible) window"?

Below is a snippet from the React Component which hosts the Document Card and Modal dialog..

我正在使用 office-ui-fabric-react 的 DetailsList 组件来显示我的表格。我正在设置道具

使复选框始终可见。但这不适用于标题中的全选复选框。仅当我将鼠标悬停在它上面时，全选复选框才可见。我希望全选复选框始终可见。有什么解决办法吗？

安装 @fluentui/react 后，我​​尝试使用像这个文档https://developer.microsoft.com/en-us/fluentui#/styles/web/layout这样的网格

但它不起作用，其他控制组件工作正常。我错过了什么？

他们的文档只提到 npm 包。

我目前正在尝试使用Navwith react-router。默认行为会重新加载页面，因此我尝试使用Link来自react-router-dom.

覆盖时很难保留默认样式linkAs。

是否有任何全局方法来覆盖链接导航行为？
就像定义一个全局链接渲染函数，然后我可以设置它来渲染Link组件react-router-dom？

尝试开始使用 Microsoft 的 Fluent UI，但由于某种原因，我收到了错误，即每个组件都没有从库中导出。

跟随“开始”

• npx create-react-app my-app
• cd my-app
• npm install @fluentui/react

包.json

应用程序.js

以下是我在每个不同的导入后遇到的错误：

1. ./src/App.js Attempted import error: 'PrimaryButton' is not exported from '@fluentui/react'.

2、3、4。Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

5. 适用于预期的 linter 警告。我非常困惑为什么 Get Started 是从导入的，@fluentui/react而文档通过说要从导入来反驳这一点office-ui-fabric-react

所以我的问题是：

1. 为什么不起作用import { PrimaryButton } from '@fluentui/react'，但是import { PrimaryButton } from 'office-ui-fabric-react';呢？
2. 是否有我缺少的全局安装？
3. 为什么@fluentui/react当所有入门模板都使用一个版本office-ui-fabric-react作为依赖项时安装 Get Started？

看起来也yarn add office-ui-fabric-react将安装"office-ui-fabric-react": "^7.111.1"。所以我很好奇这是否是更正确的方法？

复制步骤：

https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

在“DetailsList Locked Header”中，向下滚动到超过第一页的非零位置，然后在“按名称过滤”中输入“sed”。这会更新 detailsList 并且滚动条不会转到初始位置。

错误/询问：

当我们向下滚动到假设 50 的位置时，现在如果详细信息列表有更新，假设为 350。滚动条不会返回到起始位置，它会重新渲染到靠近顶部的随机位置（在我的案子）。

方法/临时黑客：

通过代码，我注意到可滚动窗格的初始滚动位置仅在实现中的“initialScrollPosition”道具更改时才被刷新。每当 detailList 通过将其设置为 0 或 1 进行更新时，我尝试更改组件中的 'initialScrollPosition' 道具。对此进行调试时，initialScrollPosition 的道具在 ScrollablePane 组件内没有改变。这不起作用，可滚动窗格仍未设置为开始。

有没有人找到解决方法或解决方案？