将样式 ts 文件从 Material V4 转换为 V5

Question

我正在尝试从 material v4 迁移到 v5，我面临的问题是之前我有一个 styles.ts 文件，我将导入我的组件和 class 看起来像这样：

import {
  defaultFont,
  primaryColor,
  infoColor,
  successColor,
  warningColor,
  dangerColor,
  grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme, createStyles } from "@material-ui/core";

export const typographyStyle = makeStyles((theme: Theme) => createStyles({
  defaultFontStyle: {

然后我将导入更新为以下内容：

import {
  defaultFont,
  primaryColor,
  infoColor,
  successColor,
  warningColor,
  dangerColor,
  grayColor,
} from "../material-kit-pro-react";
import { makeStyles, Theme } from "@mui/material/styles";
import { createStyles } from '@mui/styles';

export const typographyStyle = makeStyles((theme: Theme) => createStyles({

这使用了@mui 导入，但在我的实际 class 中，我收到以下错误：

const typographyStyle: never
import typographyStyle
This expression is not callable.
  Type 'never' has no call signatures.

我的组件非常基础，看起来像这样：

import React from "react";
import { typographyStyle } from "assets/jss/material/typography/typographyStyle";
export interface TypographyProps {
    children?: React.ReactNode;
}
export function Danger(props: TypographyProps) {
  const classes = typographyStyle();
  const { children } = props;
  return (
    <div className={classes.defaultFontStyle + " " + classes.dangerText}>
      {children}
    </div>
  );
}

错误来自const classes = typographyStyle();

Answer 1

发生这种情况是因为 makeStyles 导入已移至 @mui/styles，因此您的导入必须是：

import { Theme } from "@mui/material/styles";
import { createStyles, makeStyles } from "@mui/styles";

此外，根据 MUI 文档：

@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

和

We have replaced JSS with emotion as a default styling solution while adding support for styled-components at the same time. We recommend migration your customization from JSS/makeStyles/withStyles to the new APIs: styled and the sx prop

因此，对于 MUI v5，您可能应该使用 sx 或 styled 而不是 makestyles。你可以好好看看here and here.

将样式 ts 文件从 Material V4 转换为 V5

Convert Style ts file from Material V4 to V5

typescript

reactjs

material-ui