【Material-UI Tabs】タブのスタイルを変更する

Tabs

MUI では Tabs コンポーネントが用意されています。

スタイル変更

通常のタブは以下のようになっています。

<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />

タブの背景のスタイルを変更するには以下のように label タグにタグを埋め込みます。

<Tab label={<span className='tabLabel'>Item One</span>} {...a11yProps(0)} />
<Tab label={<span className='tabLabel'>Item Two</span>} {...a11yProps(1)} />
<Tab label={<span className='tabLabel'>Item Three</span>} {...a11yProps(2)} />

下線のスタイル変更は以下の記事が参考になりました。

完全なコードは以下に置きました。

参考記事