问题描述

在 React + TypeScript 的项目中，使用 Material-UI 的 makeStyles 方法，代码如下：

import { makeStyles, Theme } from '@material-ui/core/styles';
export default class Admin extends React.Component<{}, {}> {
    render() {
        let styles = (theme: Theme) => ({
            wrapper: {
                position: "relative",
                top: "0",
                height: "100vh"
            }
        });
        let useStyles = makeStyles(styles);
        return <div>Admin</div>;
    }
}

但是编译错误了。

No overload matches this call.
  Overload 1 of 2, '(style: Styles<Theme, {}, "wrapper">, options?: Pick<WithStylesOptions<Theme>, "flip" | "element" | "defaultTheme" | "name" | "media" | "meta" | "index" | "link" | "generateId" | "classNamePrefix"> | undefined): (props?: any) => Record<...>', gave the following error.
    Argument of type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "wrapper">'.
      Type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "wrapper">'.
        Call signature return types '{ wrapper: { position: string; top: string; height: string; }; }' and 'Record<"wrapper", CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>>' are incompatible.
          The types of 'wrapper' are incompatible between these types.
            Type '{ position: string; top: string; height: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
              Type '{ position: string; top: string; height: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
                Types of property 'position' are incompatible.
                  Type 'string' is not assignable to type '"relative" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "absolute" | "static" | "sticky" | PropsFunc<{}, "relative" | "-moz-initial" | ... 9 more ... | undefined> | undefined'.
  Overload 2 of 2, '(styles: Styles<Theme, {}, "wrapper">, options?: Pick<WithStylesOptions<Theme>, "flip" | "element" | "defaultTheme" | "name" | "media" | "meta" | "index" | "link" | "generateId" | "classNamePrefix"> | undefined): (props: {}) => Record<...>', gave the following error.
    Argument of type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "wrapper">'.
      Type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "wrapper">'.  TS2769

    23 |             }
    24 |         });
  > 25 |         let useStyles = makeStyles(styles);
       |                                    ^
    26 |         return <div>Admin</div>;
    27 |     }
    28 | }

解决方法

参考官网 https://material-ui.com/zh/styles/api/。makeStyles 有2种使用方法。

// 方法1
const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    backgroundColor: theme.color.red,
  },
}));

// 方法2
const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

这个问题使用方法1解决，加上 createStyles 方法。如：

import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
export default class Admin extends React.Component<{}, {}> {
    render() {
        let styles = (theme: Theme) => createStyles({
            wrapper: {
                position: "relative",
                top: "0",
                height: "100vh"
            }
        });
        let useStyles = makeStyles(styles);
        return <div>Admin</div>;
    }
}