排版错误 - makeStyles - 'Styles<Theme, StyleProps, "root"

Question

我在一个小型 React 应用程序上遇到以下错误。

我用"@material-ui/core": "4.11.3"

我有一个Text.tsx 组件，它的样式在Text.styles.tsx 中。我使用makeStyles 函数。

text.styles.tsx

import { makeStyles, Theme } from '@material-ui/core';

interface StyleProps {
  marginRight: number;
  marginLeft: number;
}

const useStyles = makeStyles((theme: Theme) => {
  return {
    root: {
      marginRight: (props: StyleProps) => theme.spacing(props.marginRight),
      marginLeft: (props: StyleProps) => theme.spacing(props.marginLeft),
    },
    weightBold: {
      fontWeight: theme.typography.fontWeightBold,
    },
    weightSemiBold: {
      fontWeight: theme.typography.fontWeightMedium,
    },
    weightRegular: {
      fontWeight: theme.typography.fontWeightRegular,
    },
    colorWhite: {
      color: theme.palette.background.default,
    },
    underlinedText: {
      textDecoration: 'underline',
    },
    notUnderlinedText: {
      textDecoration: 'none',
    },
  };
});

export default useStyles;

Answer 1

我认为问题就在这里，因为我使用相同的东西并且效果很好。导入的路径略有不同：

import { makeStyles, Theme } from '@material-ui/core/styles';

更新：这是我每天都在使用的代码示例：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Theme, makeStyles } from "@material-ui/core/styles";

import IconExpand from "@material-ui/icons/VerticalSplitTwoTone";

import clsx from "clsx";

import { TooltipIconButton } from "../components";
import { langUI } from "../lang";


const useStyles = makeStyles(
    ({ spacing, palette }: Theme) => ({
        root: {
            //
        },
        icon: {
            color: palette.grey[500],
        },
    })
);


export type TSidebarExpButtonProps = {
    readonly className?: string;
    readonly onClick?: () => void;
}

export function SidebarExpButton(props: TSidebarExpButtonProps): JSX.Element {
    const {
        className,
        onClick,
    } = props;

    const classes = useStyles(props);

    return (
        <TooltipIconButton
            className={clsx(classes.root, className)}
            title={langUI.provider.CmdExpand()}
            onClick={onClick}
        >
            <IconExpand
                className={classes.icon}
            />
        </TooltipIconButton>
    )
}