MUI を超えるスクロール可能なタブ

Material UI のスクロール可能なタブは Tabs のセマンティクスに溶接されており、モバイルではデフォルトでスクロールボタンが消えます。このレシピはあなたのコードが依存している部分——value/onChange 契約——を保ったまま、内部の帯を入れ替えます：ネイティブスクロール、自ら中央に寄る選択、どんな中身でも持てるタブ。

どちらかの端近くのタブをクリック——自分で中央に寄ります。行はドラッグでも動かせます——携帯と同じように。

この例を Storybook でライブ編集

value/onChange 契約を保つ

ソース内の handleChange は MUI と全く同じシグネチャ——(event, newValue)——を持ちます。移行はマークアップの差し替えを意味し、state の配線し直しではありません：あなたの useState、ハンドラー、タブパネルはそのままです。選択は api.scrollToItem(el, ’smooth’, ’center’) で自ら中央に寄ります——center-on-click の例とまったく同じ配線です。

モバイルでも消えないスクロールボタン

MUI は allowScrollButtonsMobile で明示的にオプトインしない限り、600px 未満でスクロールボタンを非表示にします——それでも、あくまで Tabs の内部要素です。ここでは矢印はあなた自身のコンポーネントです：useIsVisible(’first’) / useIsVisible(’last’) が不透明度のフェードを駆動し、あらゆるビューポートで描画され、矢印が何をしていようとタッチスクロールはネイティブのままです。

中央寄せとスクロールを両立

MUI では centered プロパティと scrollable バリアントは互いに排他的です——ドキュメントはどちらか一方を選ぶよう指示します。ここでは中央寄せはレイアウトモードではなく、クリックごとのスクロールなので、帯は両方を同時に満たします：ネイティブにオーバーフローしつつ、選択された各タブが中央へ滑ります。

タブでなくなるタブ

デモの 2 つのタブは件数バッジを持ちます。チップやアバター、混在コンテンツも同じように動きます——唯一の要件は itemId を持つことです。ソースと同じように @emotion/styled でスタイリングしても、Material アプリに馴染ませるために MUI 自身の styled() を使っても、あるいは Tailwind を使ってもかまいません。上のデモはドラッグスクロールを追加しており、マウント時に選択済みタブを復元するのは位置の保存と復元です。

Notes

ARIA パターンを選んでください：実際のパネルが切り替わる場合（ここのように）は role="tablist"/role="tab"/aria-selected を保ち、「タブ」がナビゲーションリンクである場合は aria-current を使います。
ドラッグを有効にする場合は、ドラッグ解放時に発火するクリックを抑制してください——デモは選択前に dragManager.dragging を確認しますが、これはドラッグのレシピと同じです。
RTL は追加の作業を必要としません：帯はネイティブのスクロールコンテナなので、direction: rtl が矢印ごと反転させます。

完全なソース

完全でコピー＆ペースト可能——これは、まさにそのファイルです。出所は、このライブ編集可能な Storybook 版.

MuiTabs.source.tsx

import 'react-horizontal-scrolling-menu/dist/styles.css';

import styled from '@emotion/styled';
import React from 'react';
import {
  type publicApiType,
  ScrollMenu,
  VisibilityContext,
} from 'react-horizontal-scrolling-menu';

const TABS = [
  { value: 'overview', label: 'Overview' },
  { value: 'analytics', label: 'Analytics' },
  { value: 'reports', label: 'Reports', count: 12 },
  { value: 'campaigns', label: 'Campaigns' },
  { value: 'audiences', label: 'Audiences' },
  { value: 'attribution', label: 'Attribution' },
  { value: 'conversions', label: 'Conversions', count: 3 },
  { value: 'realtime', label: 'Realtime' },
  { value: 'integrations', label: 'Integrations' },
  { value: 'settings', label: 'Settings' },
];

// role="tab" needs a tablist ancestor; the scroll container is exactly
// that, reached through the containerRef prop.
const tablistRef = (el: HTMLElement | null) => {
  if (el) {
    el.setAttribute('role', 'tablist');
    el.setAttribute('aria-label', 'Sections');
  }
};

export function MuiTabs() {
  const [value, setValue] = React.useState(TABS[0].value);

  // Same contract as MUI <Tabs onChange>: (event, newValue).
  const handleChange = (
    _event: React.SyntheticEvent | null,
    newValue: string,
  ) => setValue(newValue);

  return (
    <Root>
      <ScrollMenu
        LeftArrow={LeftArrow}
        RightArrow={RightArrow}
        containerRef={tablistRef}
      >
        {TABS.map((tab) => (
          <Tab
            key={tab.value}
            itemId={tab.value} // NOTE: itemId is required for track items
            tab={tab}
            selected={value === tab.value}
            onSelect={(event) => handleChange(event, tab.value)}
          />
        ))}
      </ScrollMenu>
    </Root>
  );
}

export default MuiTabs;

function Tab({
  itemId,
  tab,
  selected,
  onSelect,
}: {
  itemId: string;
  tab: (typeof TABS)[number];
  selected: boolean;
  onSelect: (event: React.SyntheticEvent) => void;
}) {
  const api = React.useContext<publicApiType>(VisibilityContext);

  const select = (event: React.SyntheticEvent) => {
    onSelect(event);
    const el = api.getItemElementById(itemId);
    // The behavior MUI cannot combine with `scrollable`: center the
    // selected tab, revealing its neighbors on both sides.
    if (el) api.scrollToItem(el, 'smooth', 'center');
  };

  return (
    <TabButton
      type="button"
      role="tab"
      aria-selected={selected}
      selected={selected}
      onClick={select}
      onKeyDown={(ev: React.KeyboardEvent) => {
        ev.code === 'Enter' && select(ev);
      }}
    >
      {tab.label}
      {tab.count !== undefined && <Badge>{tab.count}</Badge>}
    </TabButton>
  );
}

function LeftArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isFirstItemVisible = visibility.useIsVisible('first', true);
  return (
    <ArrowButton
      type="button"
      hidden={isFirstItemVisible}
      aria-label="Scroll tabs left"
      onClick={() => visibility.scrollPrev()}
    >
      ‹
    </ArrowButton>
  );
}

function RightArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isLastItemVisible = visibility.useIsVisible('last', false);
  return (
    <ArrowButton
      type="button"
      hidden={isLastItemVisible}
      aria-label="Scroll tabs right"
      onClick={() => visibility.scrollNext()}
    >
      ›
    </ArrowButton>
  );
}

// MUI's own tab metrics: uppercase 14px labels, 48px height, a 2px
// primary indicator. Swap the styled() calls for your theme's — nothing
// below depends on these exact values.
const PRIMARY = '#1976d2';

const Root = styled('div')({
  fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
  borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
});

const TabButton = styled('button')<{ selected?: boolean }>((props) => ({
  appearance: 'none',
  border: 'none',
  background: 'none',
  cursor: 'pointer',
  minWidth: '90px',
  minHeight: '48px',
  padding: '12px 16px',
  display: 'inline-flex',
  alignItems: 'center',
  gap: '8px',
  textTransform: 'uppercase',
  fontSize: '0.875rem',
  fontWeight: 500,
  letterSpacing: '0.02857em',
  whiteSpace: 'nowrap',
  userSelect: 'none',
  color: props.selected ? PRIMARY : 'rgba(0, 0, 0, 0.6)',
  boxShadow: props.selected ? `inset 0 -2px 0 0 ${PRIMARY}` : 'none',
  transition: 'color 0.2s, box-shadow 0.2s',

  '&:hover': {
    color: props.selected ? PRIMARY : 'rgba(0, 0, 0, 0.87)',
  },
}));

const Badge = styled('span')({
  background: PRIMARY,
  color: 'white',
  borderRadius: '10px',
  padding: '1px 7px',
  fontSize: '0.75rem',
});

// Unlike MUI's scroll buttons, these are plain components you own — they
// render on every viewport (MUI hides its buttons below 600px) and fade
// out at the edges via useIsVisible instead of unmounting.
const ArrowButton = styled('button')<{ hidden?: boolean }>((props) => ({
  appearance: 'none',
  border: 'none',
  background: 'none',
  cursor: props.hidden ? 'default' : 'pointer',
  width: '40px',
  fontSize: '1.5rem',
  color: 'rgba(0, 0, 0, 0.54)',
  opacity: props.hidden ? 0 : 1,
  pointerEvents: props.hidden ? 'none' : 'auto',
  transition: 'opacity 0.2s',
}));