MUI Tabs のスクロールアイコンの色を変更し、直感的にスクロール可能かわかりやすくする

import { Tabs as MUITabs, Tab } from "@mui/material";
import { styled } from "@mui/system";

interface Props {
  tabLabels: { text: string }[];
  value: string | number;
}

// スクロールアイコンのスタイルの上書き
const StyledTabs = styled(MUITabs)(() => ({
  "& .MuiTabScrollButton-root": {
    "&.Mui-disabled": {
      opacity: 0.25
    }
  }
}));

// 表示確認用のスタイル
const StyledTab = styled(Tab)({
  backgroundColor: "#eeeeee",
  borderLeft: "1px solid #000",
  "& + &": {
    borderLeft: "1px solid #000"
  }
});

export function Tabs({ tabLabels, value }: Props): JSX.Element {
  return (
    <StyledTabs
      value={value}
      variant="scrollable"
      scrollButtons
      allowScrollButtonsMobile
    >
      {tabLabels.map((label) => (
        <StyledTab label={label.text} value={label.text} />
      ))}
    </StyledTabs>
  );
}

const label = [
  { text: "TABS1" },
  { text: "TABS2" },
  { text: "TABS3" },
  { text: "TABS4" },
  { text: "TABS5" },
  { text: "TABS6" },
  { text: "TABS7" },
  { text: "TABS8" },
  { text: "TABS9" },
  { text: "TABS10" }
];

export default function App() {
  return (
    <div style={{ border: "1px solid black" }}>
      <Tabs tabLabels={label} value="Tabs1" />
    </div>
  );
}

const StyledTabs = styled(MUITabs)(() => ({
  "& .MuiTabScrollButton-root": {
    color: "#0d47a1",
    "&.Mui-disabled": {
      color: "#212121",
      opacity: 0.25
    }
  }
}));