typescript - 将主题应用于材质 UI 菜单组件

Question

我有下一个代码，用于应用自定义主题：

import Menu from '@material-ui/core/Menu';
import { createStyles, withStyles, Theme } from '@material-ui/core/styles';

const myMenu = withStyles( ( theme: Theme ) =>
    createStyles( {
        root: {
            backgroundColor: theme.palette.primary.main,
        },
    } ),
)( Menu );

但我收到下一个错误：

Argument of type 'ComponentType<MenuProps>' is not assignable to parameter of type 'ComponentType<ConsistentWith<MenuProps, { classes: Record<"root", string>; }> | ConsistentWith<PropsWithChildren<MenuProps>, { ...; }>>'.
  Type 'ComponentClass<MenuProps, any>' is not assignable to type 'ComponentType<ConsistentWith<MenuProps, { classes: Record<"root", string>; }> | ConsistentWith<PropsWithChildren<MenuProps>, { ...; }>>'.
    Type 'ComponentClass<MenuProps, any>' is not assignable to type 'ComponentClass<ConsistentWith<MenuProps, { classes: Record<"root", string>; }> | ConsistentWith<PropsWithChildren<MenuProps>, { ...; }>, any>'.
      Types of property 'propTypes' are incompatible.
        Type 'WeakValidationMap<MenuProps> | undefined' is not assignable to type 

标签： typescriptmaterial-ui

Answer 1

你必须在函数(theme: Theme) =>内部移动。createStyles像这样：

import Menu from '@material-ui/core/Menu';
import { createStyles, withStyles, Theme } from '@material-ui/core/styles';

const myMenu = withStyles(createStyles((theme: Theme) => {
        root: {
            backgroundColor: theme.palette.primary.main,
        },
    }),
)( Menu );