无法为 Material UI 中的选项卡应用水平滚动

Question

I am unable to apply the horizontal scroll to the Tabs using material UI.

below link is the material ui version i am using https://v0.material-ui.com/#/components/tabs

The number of Tabs increasing its taking more width.

I trid to apply width, but its taking entire Tabs tab.

I need to apply only Tabs width and horizontal scroll.

 <Tabs inkBarStyle={{backgroundColor: 'blue'}} value={this.state.tableNameTab} onChange={this.handleChangeTab} key = "tabsData" style={{ maxWidth: "500px", overflow: "auto" }} > {this.state.TableDetails.map( (data,index) => <Tab label={data.tableName} value={data.tableName} key={'key'+index} > <h6>{data.tableName}</h6> </Tab> ) } </Tabs>

Answer 1

Welcome to SO!

Using scrollable-force-tab you can achieve inside scoll of tabs header

Its mention in their Official Doc please have a look