Set width for `PivotItem` in Office UI Fabric - css

Question

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>
<PivotItem headerText="Bar">
<Label>Pivot #2</Label>
</PivotItem>
<PivotItem headerText="Bas">
<Label>Pivot #3</Label>
</PivotItem>
<PivotItem headerText="Biz">
<Label>Pivot #4</Label>
</PivotItem>
</Pivot>
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?

Answer 1

PivotItem styles could be adjusted via Pivot.styles property, at least the following styles could be set:
link
linkContent
linkIsSelected
Example
The following example demonstrates how to set fixed width for pivot link:
const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
link: {
width: "300px"
},
linkIsSelected: {
width: "300px"
}
};
where
const tabsItems = [
{
content: "Pivot #1",
header: "My Files"
},
{
content: "Pivot #2",
header: "Recent"
},
{
content: "Pivot #3",
header: "Shared with me"
}
];
export const PivotBasicExample: React.FunctionComponent = () => {
return (
<Pivot styles={pivotStyles}>
{tabsItems.map((tabItem,idx) => (
<PivotItem key={idx} headerText={tabItem.header}>
<Label>{tabItem.content}</Label>
</PivotItem>
))}
</Pivot>
);
};