在 Fluent 中自定义 Pivot Item Link 行的高度 UI

Question

我正在尝试使用 React 在 Microsoft 的 Fluent UI 中增加所选 Pivot 项目 link 上的线的高度。

以下是用于说明目的的屏幕截图：

橙色箭头指向我想增加高度的蓝线。

我已经尝试设置 Pivot 组件的样式属性，但到目前为止都没有成功。这是一些代码

const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
    link: { ? },
    linkContent: { ? }
};

<Pivot styles={pivotStyles} linkSize={PivotLinkSize.large}>
    <PivotItem headerText="Zane"></PivotItem>
    <PivotItem headerText="Kai"></PivotItem>
    <PivotItem headerText="Jay"></PivotItem>
</Pivot>

我尝试了 link 和 linkContent 的不同属性，但还没有找到方法。我相信我正在尝试做的是操纵 IStyle 界面，但我找不到它的属性的详细信息。那里的link很含糊。比如link、linkContent等的所有可用属性是什么？

如有任何想法，我们将不胜感激！

谢谢。

Answer 1

事实证明我走对了路，只需要准确的字段。这是最终起作用的：

const pivotStyles = {
  linkIsSelected: {
    selectors: {
      ':before': {
        height: '6px',   // was previously defaulted at 2px
      }
    }
  }
};

我搜索了大约 424 万个网站来找到这个答案，但这里有一些最有帮助的网站，以防他们感兴趣：

• Pivot.styles.ts
的实际源代码
• Microsoft Fluent UI Pivot Documentation

使用 Chrome 开发工具对 类 进行深入检查也有帮助。 ;)

这是最终结果的图片：