【メモ】Material UI - Tabs APIのTabの色を個別に変更する。

はじめに

Tabsの中の１つだけ目立たせる時に使用した。

直接styleを書き換えても良いが、そうするとずっと色がついたままになり、せっかくのTabs,Tabの機能で選択していない時に、灰色になる効果が薄れてしまうので、選択した時にだけ色が他のタブと変わるようにした。

一応公式ドキュメント

サンプルコード(chatGPT)

import React from 'react';
import { Tabs, Tab, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  hoge: {
    '&.Mui-selected': {
      color: 'red',
    },
  },
});

export default function CustomTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs value={value} onChange={handleChange}>
      <Tab label="foo" />
      <Tab label="hoge" classes={{ selected: classes.hoge }} />
      <Tab label="bar" />
    </Tabs>
  );
}

結果

このコードを参考に、Tabごとに色を変えることができた。

あまり調べても情報がなかった時に、chatGPTはとても便利だと思う。