<p dir="auto">I decided to start using transitions with material-ui 0.18.7, installed react-transition-group v2 (<em>RTGV2</em>), was happy with my transitions, then started noticing really weird behavior in unrelated components.  In particular, ripples fail by leaving a big circle over the rippling component.  In my case, I'd just added an unrelated FloatingActionButton when I discovered this, and thought it had run amok.</p>
<p dir="auto">NPM didn't gripe about material-ui having a conflict.  I don't see what you could do differently that would make it complain.</p>
<p dir="auto">Moving to RTGV2 is a big move, so if you do get more push for compatibility in material-ui &lt;1.0, you'll probably need to somehow allow clients to use either v1 or v2 - which is probably prohibitively difficult.</p>
<p dir="auto">A runtime check and console spew for the wrong version might make sense, though.</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">After I Installed React Transition Group on my project, when I click on Material UI Buttons (Raised or Flat) a weird <code class="notranslate">&lt;div&gt;</code> appears in the Button comp, like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div in=&quot;false&quot; style=&quot;position: absolute; top: -51.6045px; left: -2.60453px; height: 141.209px; width: 141.209px; border-radius: 50%; background-color: rgb(255, 255, 255);&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">in</span>="<span class="pl-s">false</span>" <span class="pl-c1">style</span>="<span class="pl-s">position: absolute; top: -51.6045px; left: -2.60453px; height: 141.209px; width: 141.209px; border-radius: 50%; background-color: rgb(255, 255, 255);</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">one for each new click.</p>
<p dir="auto">If I remove React Transition Group, via <code class="notranslate">yarn remove</code>, everything works fluently, again.</p>
<p dir="auto">I'm using <code class="notranslate">Transition</code> in this way, as explained in <a href="https://reactcommunity.org/react-transition-group/#Transition" rel="nofollow">main documentation</a>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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,
}) =&gt; (
  &lt;Transition in={inProp} timeout={300}&gt;
    {state =&gt; (
      &lt;div
        style={{
          ...defaultStyle,
          ...transitionStyles[state],
        }}
      &gt;
        {children}
      &lt;/div&gt;
    )}
  &lt;/Transition&gt;
);

Fade.propTypes = {
  in: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};
export default Fade;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">PropTypes</span> <span class="pl-k">from</span> <span class="pl-s">'prop-types'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Transition</span> <span class="pl-k">from</span> <span class="pl-s">'react-transition-group/Transition'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">defaultStyle</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">transition</span>: <span class="pl-s">`opacity 300ms ease-in-out`</span><span class="pl-kos">,</span>
  <span class="pl-c1">opacity</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">transitionStyles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entering</span>: <span class="pl-kos">{</span> <span class="pl-c1">opacity</span>: <span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">entered</span>: <span class="pl-kos">{</span> <span class="pl-c1">opacity</span>: <span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">Fade</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">in</span>: <span class="pl-s1">inProp</span><span class="pl-kos">,</span>
  children<span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Transition</span> <span class="pl-c1">in</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">inProp</span><span class="pl-kos">}</span> <span class="pl-c1">timeout</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">300</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-s1">state</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>
        <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
          ...<span class="pl-s1">defaultStyle</span><span class="pl-kos">,</span>
          ...<span class="pl-s1">transitionStyles</span><span class="pl-kos">[</span><span class="pl-s1">state</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">}</span>
      <span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Transition</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-v">Fade</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">in</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">bool</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Fade</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Maybe, is there a conflict with React Transition Group v. 1.2.0, used as dependency in Material UI?</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.18.7</li>
<li>React: 15.6.1</li>
<li>React Transition Group: 2.2.0</li>
<li>Browser: all</li>
</ul>