Customization of the Height of a Pivot Item Link Line in Fluent UI

Question

I'm trying to increase the height of the line on the selected Pivot item link in Microsoft's Fluent UI using React.

Here's a screenshot for the purposes of clarification:

The orange arrow is pointing to the blue line of which I would like to increase the height.

I have tried setting the styles attribute of the Pivot component but thus far have been unsuccessful. Here's some code

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>

I have experimented with different attributes of both link and linkContent but haven't found a way yet. I believe what I'm trying to do is manipulate the IStyle interface but I can't find details of the attributes of it. The link there is very vague. For example, what are all the available attributes of link, linkContent, etc.?

Any thoughts on this would be most appreciated!

Thank you.

score 3 · Accepted Answer · answered May 29 '20 at 17:56

Turns out I was on the right track and just needed the exact fields. Here's what ended up working:

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

I scoured about 4.24 million sites to find this answer but here are some of the most helpful in case they are of interest:

the actual source code of Pivot.styles.ts
the Microsoft Fluent UI Pivot Documentation

A deep examination of the classes using Chrome Dev Tools also helped. ;)

Here's a picture of the end result:

Thank you! made my day!! – Vamshi Vangapally Oct 11 '20 at 21:59 — Vamshi Vangapally, Oct 11 '20 at 21:59

Customization of the Height of a Pivot Item Link Line in Fluent UI

1 Answers1