Применить тему к компоненту меню пользовательского интерфейса материала

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

Вы должны переместить (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 );