【React】material-tailwindのTabのアニメーションを無効にする

概要

material-tailwindにはTailwind CSS Tabs - Reactのドキュメントで紹介されている通り、Tab実装のためのコンポーネントが用意されています。ドキュメント中のコンポーネントのサンプルをご覧いただければわかる通り、アニメーションが実装されています。
一つ目はタブ選択時のタブ移動のアニメーションで、二つ目はタブ選択時のbody要素の表示アニメーションです。デフォルトのままでも問題ないとは思いますが、個人的には少しもっさりしてるのが気になりました。というわけで、アニメーションを無効にしたい場合どうするかというのを今回メモ書きします。

前提

• 使用したmaterial-tailwind/reactのバージョンは2.1.10です。

対応方針

• タブ移動のアニメーションの無効ですが、How to disable tab animations in @material-tailwind/reactの記事が参考になります。タブの要素に対して!translate-x-0のスタイルを設定することで移動のアニメーションを無効にできます。
• body要素の表示アニメーションについては、TabsBodyのCustom Tabs Animationで無効化します。処理としてはopacityでbodyの表示切り替えをしているようでしたので、opacityを1固定にして表示の切り替えは自前で実装します。

実装サンプル

export const TabSampleComponent: FC = () => {
  const [activeTab, setActiveTab] = useState("category");

  return (
    <Tabs value={activeTab} className="max-w-[99%]">
      <TabsHeader
        className="rounded-none border-b border-blue-gray-50 bg-transparent p-0"
        indicatorProps={{
          id: "tabs-header-indicator",
          className:
            "bg-transparent border-b-2 border-gray-900 shadow-none rounded-none",
        }}
      >
        <Tab
          value={"place"}
          onClick={() => setActiveTab("place")}
          className={
            // translate-x-0でタブの移動アニメーションを無効
            "[&_#tabs-header-indicator]:!translate-x-0 " +
            (activeTab === "place" ? "text-gray-900" : "")
          }
        >
          場所を選択
        </Tab>
        <Tab
          value={"category"}
          onClick={() => setActiveTab("category")}
          className={
            // translate-x-0でタブの移動アニメーションを無効
            "[&_#tabs-header-indicator]:!translate-x-0 " +
            (activeTab === "category" ? "text-gray-900" : "")
          }
        >
          カテゴリーを選択
        </Tab>
      </TabsHeader>
      <TabsBody
        animate={
          // bodyの切り替え時のアニメーションを無効
          {
            initial: { opacity: 1 },
            mount: { opacity: 1 },
            unmount: { opacity: 1 },
          }
        }
      >
        {activeTab === "place" ? (
          <TabPanel value={"place"}>場所</TabPanel>
        ) : (
          <TabPanel value={"category"}>カテゴリー</TabPanel>
        )}
      </TabsBody>
    </Tabs>
  );
};