Пользовательский интерфейс материала: ошибка с группой реагирования перехода v 2.2.0

Question

Я использую <Transition> как объяснено в основной документации React Transition Group.

import React from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';

const defaultStyle = {
 transition: `opacity 300ms ease-in-out`,
 opacity: 0,
};

const transitionStyles = {
 entering: { opacity: 1 },
 entered: { opacity: 1 },
};

const Fade = ({
 in: inProp,
 children,
}) => (
 <Transition in={inProp} timeout={300}>
  {state => (
   <div
    style={{
      ...defaultStyle,
      ...transitionStyles[state],
    }}
  >
    {children}
  </div>
)}
</Transition>
);

Fade.propTypes = {
 in: PropTypes.bool.isRequired,
 children: PropTypes.node.isRequired,
};

export default Fade;

Это работает, но не очень хорошо с Material UI, особенно с кнопками, везде в моем приложении: когда я нажимаю на них, появляется белый div за ними:

<div in="false" style="position: absolute; top: -88.218px; left: -97.218px; height: 220.436px; width: 220.436px; border-radius: 50%; background-color: rgb(255, 255, 255);"></div>

и эта странная ошибка в консоли:

Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <div> tag. Remove these props from the element.

Эти реквизиты о переходе, но я не могу понять проблему.

Я использую React 15.6.1, Material ui 0.18.7 и React Transition Group 2.2.0

Answer 1

Я столкнулся с этой ошибкой сегодня, и я зарегистрировал проблему + репро на их github.

https://github.com/callemall/material-ui/issues/8046

(repro: https://codesandbox.io/s/q9o5q0l5nw)

Я проверил в v1.0.0-beta.8 и похоже, что он работает нормально ( https://codesandbox.io/s/r5nplz89nn).

Позиция проекта, по сути, "материал-ui v0.x является устаревшим кодом". Так что ваши варианты либо; отключить рябь в вашем приложении, исправить его с помощью PR или перейти к незаконченной ветке бета-версии v1.