Set width for `PivotItem` in Office UI Fabric

Occasional Visitor

I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned.




I need to display the tabs with equal width so that they occupy the 100% width of the page.
Below is the code for Pivot.


<Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}>
<PivotItem headerText="Foo">
<Label>Pivot #1</Label>
<PivotItem headerText="Bar">
<Label>Pivot #2</Label>
<PivotItem headerText="Bas">
<Label>Pivot #3</Label>
<PivotItem headerText="Biz">
<Label>Pivot #4</Label>


Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem.

const pivotStyles:IPivotStyles = {
link: {},
linkContent: {},
linkIsSelected: {},
text: {},
icon: {},
count: {},
root: {
//background: DefaultPalette.greenDark

How can I apply style to PivotItem so that I can add width to it?

0 Replies