Ошибка типа броска шрифта при назначении компонента перехода в снэкбар пользовательского интерфейса материала

Question

Я пытаюсь создать предупреждающие сообщения в снэк-баре с использованием пользовательского интерфейса материалов в приложении реагирования с использованием машинописи.Это выдает ошибку типа, когда я пытаюсь изменить направление перехода закусочной.

Используется демонстрационная закусочная из документации по пользовательскому интерфейсу.По умолчанию закусочная переходит снизу вверх.Я хочу перевести это сверху вниз. Здесь они объясняют, как это сделать.

import IconButton from '@material-ui/core/IconButton';
import Slide from '@material-ui/core/Slide';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import ErrorIcon from '@material-ui/icons/ErrorOutlined';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import CloseIcon from '@material-ui/icons/Close';
import green from '@material-ui/core/colors/green';
import amber from '@material-ui/core/colors/amber';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import WarningIcon from '@material-ui/icons/WarningRounded';
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';

import * as React from 'react';

type AlertMessageProps = {
  index: number;
  type: string;
  message: string;
  onClose: (event: any) => void
};

type AlertMessageStateProps = {
  open: boolean
}

const variantIcon = {
  success: CheckCircleIcon,
  warning: WarningIcon,
  error: ErrorIcon,
  info: InfoIcon,
};

const styles1 = (theme: any) => ({
  success: {
    backgroundColor: green[600],
  },
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  info: {
    backgroundColor: theme.palette.primary.dark,
  },
  warning: {
    backgroundColor: amber[700],
  },
  icon: {
    fontSize: 20,
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing.unit,
  },
  message: {
    display: 'flex',
    alignItems: 'center',
  },
});

const MySnackbarContent: React.FunctionComponent<WithStyles & {
  onClose: any,
  variant: string,
  message: string
}> = (props) => {
  const { classes, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={classes[variant]}
      aria-describedby="client-snackbar"
      message={
        <span id="client-snackbar" className={classes.message}>
          <Icon className={classes[variant]} />
          {message}
        </span>
      }
      action={[
        <IconButton
          key="close"
          aria-label="Close"
          color="inherit"
          className={classes.close}
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>,
      ]}
      {...other}
    />
  );
}

const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
export default class AlertMessage extends React.PureComponent<AlertMessageProps, AlertMessageStateProps> {

  state = {
    open: true
  }

  handleClose = (event: any, reason: string) => {
    if (reason === 'clickaway') {
      return;
    }

    this.setState({ open: false });
  };


  public render() {
    const { message } = this.props;
    return (
      <Snackbar
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        TransitionComponent={<Slide direction="down" />}
        open={this.state.open}
        autoHideDuration={6000}
        onClose={this.handleClose}
      >
        <MySnackbarContentWrapper
          onClose={this.handleClose}
          variant={this.props.type}
          message={message}
        />    
      </Snackbar>
    );
  }
}

Это код, который я написал.

Он дает ошибку типа

[tsl] ERROR in C:\Users\ssripat\projects\interface\src\components\Alerts\AlertMessage.tsx(118,9)
      TS2322: Type 'Element' is not assignable to type 'string | ComponentClass<any, any> | FunctionComponent<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.

Я получаю предупреждение от tslint в TransitionComponent в Snackbar.Когда я наводю на предупреждение, вот что я получаю

(JSX attribute) SnackbarProps.TransitionComponent?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined
Type 'Element' is not assignable to type 'string | ComponentClass<any, any> | FunctionComponent<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.ts(2322)
Snackbar.d.ts(29, 3): The expected type comes from property 'TransitionComponent' which is declared here on type 'IntrinsicAttributes & SnackbarProps & { children?: ReactNode; }'

Answer 1

У меня была похожая ошибка, связанная с компонентом Transition, когда я использовал Snackbar.Проблема была решена с помощью @ material-ui / core 4.1.3. см. Выпуск github