reactjs - 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 文档

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

这是最终结果的图片：