title: Using Material Design Lite with React
body: <p>I am trying to use MDL on an existing project that uses React, and I am running into several issues. Things seem fine on the first load, although there are many warning messages: </p>
  
  <blockquote>
    <p>Warning: ReactMount: Root element has been removed from its original container. New container:</p>
  </blockquote>
  
  <p>This happens pretty much for every DOM element that has a class recognized by MDL (examples: mdl-layout, mdl-layout__content, etc.) and it happens on any DOM changes. </p>
  
  <p>Further, when changing routes, there is an "Invariation Violation" error: </p>
  
  <blockquote>
    <p>Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)... </p>
  </blockquote>
  
  <p>Does this mean that MDL and React are pretty much incompatible? </p>
  
  <p><strong>Update</strong>: The issue disappears if the element with class="mdl-js-layout" is not the topmost element in the reactjs render function. Once I wrapped that element, all is good. </p>