如何在TS工具函数文件中使用Material-UI主题的本地化资源

API 探路者

2026-9-30

解决方案

你遇到的报错是React Hook的强制规则限制：所有Hook只能在React函数组件或者自定义Hook内部调用，不允许在文件顶层、普通JS/TS函数中直接调用。以下是两种可行的实现方案：

方案1：将工具函数封装为自定义Hook

这是最符合React规范的实现方式，适合所有工具函数仅给React组件调用的场景。

// 工具函数文件 示例：src/utils/localizedUtils.ts
import { useTheme } from '@mui/material/styles';

// 自定义Hook命名必须以use开头，符合React Hook命名规则
export const useLocalizedUtils = () => {
  const t = useTheme().props;

  // 封装你需要的通用逻辑
  const getGeneralText = (key: string) => {
    return t.General[key] ?? '';
  };

  const formatLocalizedDate = (date: Date) => {
    // 用到t的其他通用逻辑
  };

  return {
    getGeneralText,
    formatLocalizedDate
  };
};

组件内调用方式：

import { useLocalizedUtils } from '@/utils/localizedUtils';

const DemoComponent = () => {
  const { getGeneralText } = useLocalizedUtils();
  return <span>{getGeneralText('someString')}</span>;
};

方案2：将本地化对象作为参数传入工具函数

适合工具函数需要兼容非React场景调用的情况，不需要改造工具为Hook形式，调用时传入本地化对象即可。

// 工具函数文件 示例：src/utils/common.ts
export const getGeneralText = (t: any, key: string) => {
  return t.General[key] ?? '';
};

export const formatLocalizedDate = (t: any, date: Date) => {
  // 其他通用逻辑
};

组件内调用方式：

import { useTheme } from '@mui/material/styles';
import { getGeneralText } from '@/utils/common';

const DemoComponent = () => {
  const t = useTheme().props;
  return <span>{getGeneralText(t, 'someString')}</span>;
};