Office Ui Fabric Pivot control Overflow issue in SPFx

Problem

office-ui-fabric-react is recommended to use with SharePoint Framework. 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

With the Office UI Fabric React there is a overflow issue in Pivot. The overflow doesn't work as expected. 

Solution

• Install @fluentui/react-tabs 
• npm -i @fluentui/react-tabs
• Import the package to your React component 
• import { Pivot, PivotItem } from '@fluentui/react-tabs';
• Add overflow code to the Pivot 
• overflowBehavior="menu"

Conclusion 

SharePoint Framework (SPFx) starting points

 Introduction

In this blog post we will look at some basic SPFx ideas for a easy start on SPFx. These points can be changed according to the individual and I'm sharing these points based only on my own experience. 

• Its easy to use React framework for SPFx
• As UI framework its great to use office-ui-fabric-react
• npm install office-ui-fabric-react
• For the controls its better to use sp-dev-fx-controls-react from pnp
• Visit https://pnp.github.io/sp-dev-fx-controls-react/
• npm install @pnp/spfx-controls-react --save --save-exact
• Also better to user Reusable property pane controls for the SharePoint Framework solutions
• Visit https://pnp.github.io/sp-dev-fx-property-controls/
• npm install @pnp/spfx-property-controls --save --save-exact
• Use functional components with React
• You can use the below GitHub repository to start your project. 
• https://github.com/SuhailCloud/hello-spfx 
• Use PnPJS npm packages for CRUD Operations in SharePoint 
• https://pnp.github.io/pnpjs/packages/
• npm install @pnp/sp --save