FormHelperTextコンポーネントとTypographyコンポーネントの関係性

発生した問題

以下のソースコードを実装した際、hydration errorが発生した。
(ソースコード一部抜粋)

<FormHelperText sx={{ textAlign: "right" }}>
    <Typography fontSize={12}>選択できるのは3つまで</Typography>
</FormHelperText>

動作環境

package.json

"dependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@fontsource/material-icons": "^5.1.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.9",
    "@mui/material": "^6.1.9",
    "@reduxjs/toolkit": "^2.5.0",
    "@storybook/cli": "^8.4.7",
    "@testing-library/jest-dom": "^6.6.3",
    "konva": "^9.3.18",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.53.2",
    "react-konva": "^19.0.1",
    "react-redux": "^9.2.0",
    "use-image": "^1.1.1",
    "vite-plugin-env-compatible": "^2.0.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/addon-themes": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-perfectionist": "^4.3.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "eslint-plugin-sort-keys": "^2.3.5",
    "eslint-plugin-storybook": "^0.11.1",
    "globals": "^15.12.0",
    "happy-dom": "^15.11.7",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.10",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
    "storybook": "^8.4.7",
    "ts-node": "^10.9.2",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.16.0",
    "vite": "^6.0.1",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^2.1.6"
  },

hydration errorとは？

簡単に言うと、クライアントサイドとサーバーサイドのコンポーネントのビルド時に内容などが相違すると発生するもの、とのこと。
詳細は以下をご確認してみてください↓

試したこと

クライアントサイドのレンダリングを管理して、対象のコンポーネントのレンダリングを制御したが、現状変わらず。
(ソースコード一部抜粋)

const [isClient, setIsClient] = useState<boolean>(false);

useEffect(() => {
    // hydration errorに対応するためクライアントサイドレンダリングを管理する
    setIsClient(true);
}, []);

return (
  {/* 以下クライアントサイドでのみレンダリング */}
  {isClient && (
      <FormHelperText sx={{ textAlign: "right" }}>
        <Typography fontSize={12}>選択できるのは3つまで</Typography>
      </FormHelperText>
  )}
)

解決方法

どうやらFormHelperTextコンポーネントとTypographyコンポーネントを親子関係で使用すると、hydration errorが発生するらしい。
以下のように修正したところ、エラーは解消された。

<FormHelperText sx={{ fontSize: "12px", textAlign: "right" }}>
  選択できるのは3つまで
</FormHelperText>

補足

これは余談だが、文字列表示の管理に便利がTypographyコンポーネントだが、混ぜると危険なことがあるのを初めて知った・・・。⚠️

(2025/01/17追加)
以下の原因で同様のエラーが出るようです。（今回はまさしく該当の内容でした）