将主题应用于材质 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 

Answer 1

您必须在createStyles函数内移动(theme: Theme) =>。喜欢这个：

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 );