Css overide for office fabri ui Pivot

Question

How can we do padding left in office fabric UI CSS for pivot component , Want to padding of Pivot component its working on develoepr tool added screenshot for same but not able to override through css in my solution

<Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} >
    <PivotItem headerText="Current" itemIcon="Recent">
        <Label></Label>
    </PivotItem>
</Pivot>

Answer 1

You can wrap the Pivot component inside a div element and add your custom style to it like:

<div className={styles.pivotWrapper}>
    <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} >
        <PivotItem headerText="Current" itemIcon="Recent">
            <Label></Label>
        </PivotItem>
    </Pivot>
</div>

.pivotWrapper {
    /*Your custom CSS goes here*/
}