はじめに

CSSライブラリのMUIはとても便利で結構利用します。
MUIのTabsの下線の色を変更する機会があったので備忘録として記載します。

デフォルトの下線色

Tabsタグのデフォルト色は以下の緑枠のような感じです。

背景色を濃いめの赤にしているため、デフォルトの下線では少し見にくいな～という感じだったので変更してみます。

下線の色を変更するにはTabsタグのpropsの一つであるTabIndicatorPropsを用います。

型はオブジェクト型なので以下のようにコードを書きます。

<Tabs
    TabIndicatorProps={{
        style: { backgroundColor: 'yellow' },
    }}
>
    {/* 省略 */}
</Tabs>

以下のようにタブの下線色が変わっていることが確認できました。

それぞれのタグに大量のpropsがあるのでなかなか慣れるまでが大変ではありますが引き続き学んでいこうと思います！