✨

MUIのTabs, Tabのスタイルを変えてみた

2024/05/27に公開

'use client';

import { styled } from '@mui/material';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useState } from 'react';
import { Opacity } from '@mui/icons-material';

// スタイルを適用したTabコンポーネントを作成
const StyledTab = styled((props) => <Tab {...props} />)(({ theme }) => ({
  '&.MuiTab-root': {
    // スタイルを定義
    // color: theme.palette.primary.main,
    // fontWeight: 'bold',
    color: '#000000',
  },
  '&.Mui-selected': {
    // 選択時のスタイルを定義
    color: '#000000',
    fontWeight: 'bold',
  },
}));

// スタイルを適用したTabsコンポーネントを作成
const StyledTabs = styled(Tabs)({
  backgroundColor: '#f5f5f5',
  '& .MuiTabs-indicator': {
    display: 'none',
    // opacity: 0,
    // backgroundColor: '#dcdcdc',
  },
});

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

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

  return (
    <StyledTabs
      value={value}
      onChange={handleChange}
      indicator={{ backgroundColor: '#dcdcdc' }}
    >
      <StyledTab label="Tab 1" />
      <StyledTab label="Tab 2" />
      <StyledTab label="Tab 3" />
    </StyledTabs>
  );
}

考察

別プロジェクトでTabのスタイルがうまく効かなかったのは、グローバル環境のthemeの設定の問題の可能性があるので確認する
とはいえ、display: 'none'は試してなかったのでやってみる

考察

Discussion