导出具有 Material-UI 主题支持的辅助函数

Question

我想创建一个新文件，其中将包含多个使用相同逻辑的组件的辅助函数，问题是我需要在该文件中使用我的 locale.ts 文件来根据主题（本地化）使用当前语言但似乎我无法在 ts 文件中调用 const t: any = useTheme().props 。（错误：React Hook "useTheme" 不能在顶层调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用）

今天在我的 tsx 组件文件中：

t: any = useTheme().props
t.General.someString

如何在我的辅助函数文件中使用 Material-UI 主题的本地化？

Answer 1

Hook 不能在顶层使用，这是不支持的：

// top level
const any = useTheme().props;

它应该在功能组件或另一个钩子中使用。参考hook规则here:

function Component() {
  // valid because it's inside a React function
  const any = useTheme().props;
  return (...);
}

您可以创建一个辅助挂钩，return提供您需要的特定数据：

const useThemeProps = () => {
  // valid because it's inside another hook
  return useTheme().props;
}

function Component() {
  const any = useThemeProps();
  return (...);
}

你也可以直接return数据：

function Component() {
  const { props } = useTheme();
  return (...);
}

Answer 2

这似乎对我有用

在 Utils.js 文件中

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

const IsMobile = () => {
  return useMediaQuery(useTheme().breakpoints.down('md'));
};

export { IsMobile };

内部组件：

import { IsMobile } from 'components/utilities/Utils';

测试

console.log(IsMobile());

在 JSX 中

{IsMobile ? () : ()}

导出具有 Material-UI 主题支持的辅助函数

Export helper functions with Material-UI theme support

localization

reactjs

material-design

material-ui

tsx