Fluent UI 中枢轴项链接线高度的自定义

Question

我正在尝试使用 React 在 Microsoft 的 Fluent UI 中增加所选 Pivot 项链接上的行高。

这里是一个用于澄清目的的屏幕截图：

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

我已经尝试设置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、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 开发工具对课程进行深入检查也有帮助。 ;)

这是最终结果的图片：