title: material-ui jss-rtl - after using jss-rtl my page is still LTR
body: <p>I'm using <code>material-ui</code> and <code>next</code> and <code>jss-rtl</code> in my <code>react</code> project but there is a problem
  the page is still <code>ltr</code> after using <code>&lt;JssProvider ...&gt;</code></p>
  
  <p>-rtl component code:</p>
  
  <pre><code>import React from "react";
  import { create } from 'jss';
  import rtl from 'jss-rtl';
  import JssProvider from 'react-jss/lib/JssProvider';
  import { createGenerateClassName, jssPreset } from 'material-ui/styles';
  
  // Configure JSS
  const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
  
  // Custom Material-UI class name generator.
  const generateClassName = createGenerateClassName();
  
  function RTL(props) {
    return (
      &lt;JssProvider jss={jss} generateClassName={generateClassName}&gt;
        {props.children}
      &lt;/JssProvider&gt;
    );
  }
  export default RTL;
  </code></pre>
  
  <p>-index.js Code :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {createBrowserHistory} from "history";
  import {Router, Route, Switch} from 'react-router-dom';
  import {MuiThemeProvider, createMuiTheme} from 'material-ui/styles';
  import r8 from "./components/r8";
  import RTL from "./components/RTL";
  import appRoutes from "./routes/app";
  import "./assets/css/App.css";
  import "./assets/fonts/fonts.css";
  
  const hist = createBrowserHistory();
  const theme = createMuiTheme({
    typography: {
      fontFamily: "PhpPlus"
    },
    pallete: {
      primary: {
        light: r8.color.indigo[300],
        main: r8.color.indigo[500],
        dark: r8.color.indigo[700],
      },
      secondary: {
        light: r8.color.pink.A200,
        main: r8.color.pink.A400,
        dark: r8.color.pink.A700,
      },
      error: {
        light: r8.color.red[300],
        main: r8.color.red[500],
        dark: r8.color.red[700],
      }
    }
  });
  const Rendering = &lt;RTL&gt;
    &lt;MuiThemeProvider theme={theme}&gt;
      &lt;Router history={hist}&gt;
        &lt;Switch&gt;
          {
            appRoutes.map((route, key) =&gt; {
              return &lt;Route {...route} key={key}/&gt;;
            })
          }
        &lt;/Switch&gt;
      &lt;/Router&gt;
    &lt;/MuiThemeProvider&gt;
  &lt;/RTL&gt;;
  
  ReactDOM.render(Rendering, document.getElementById('R8'));
  </code></pre>
  
  <h2>[NOTE] no errors in console</h2>
  
  <p>i tested :</p>
  
  <pre><code>const theme = createMuiTheme({ direction: "rtl", ...});
  
  //no change , still ltr
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;body dir="rtl"&gt;
  //page direction is rtl but paddings or margins and floats and other css codes not flipped!
  </code></pre>
  
  <p>Does anybody know what's wrong?
  Note that this code was working in an earlier version of my project on Windows 10. When I changed my OS into Linux Ubuntu 16.04 (LTS) and installed Nodejs, it's not working anymore...
  (sorry for bad typing English - I'm Persian! :) )</p>