material-ui jss-rtl - after using jss-rtl my page is still LTR

Asked 12/4, 2018 at 20:29 Answered 14/12, 2019 at 10:1

I'm using material-ui and next and jss-rtl in my react project but there is a problem the page is still ltr after using <JssProvider ...>

-rtl component 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 (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      {props.children}
    </JssProvider>
  );
}
export default RTL;

-index.js 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 = <RTL>
  <MuiThemeProvider theme={theme}>
    <Router history={hist}>
      <Switch>
        {
          appRoutes.map((route, key) => {
            return <Route {...route} key={key}/>;
          })
        }
      </Switch>
    </Router>
  </MuiThemeProvider>
</RTL>;

ReactDOM.render(Rendering, document.getElementById('R8'));

[NOTE] no errors in console

i tested :

const theme = createMuiTheme({ direction: "rtl", ...});

//no change , still ltr

<body dir="rtl">
//page direction is rtl but paddings or margins and floats and other css codes not flipped!

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! :) )

Isreal answered 12/4, 2018 at 20:29 Comment(1)

somebody help!! :) – Isreal 13/4, 2018 at 22:44

I acted in following order:

create a JSS Provider same as you.
create a component witch include JSS Provider in it

I think you need to add some packages to packagejson file or maybe update react or material-ui.

Here is mine:

// pagckage.json
...
"dependencies": {
    "@material-ui/core": "^1.0.0",
    "@material-ui/icons": "^1.0.0",
    "jss-rtl": "^0.2.3",
    "material-ui": "^1.0.0-beta.47",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-jss": "^8.4.0",
    "react-scripts": "^1.1.4",
}
...


// the RTL component in separate rtl.jsx file
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/core/styles';

const jss = create({plugins: [...jssPreset().plugins, rtl()]});

const generateClassName = createGenerateClassName();

export default props => (
    <JssProvider jss={jss} generateClassName={generateClassName}>
        {props.children}
    </JssProvider>
);


// Sample for your root component
import React from 'react';
import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import RTL from './app/public/rtl';

const theme = createMuiTheme({
    direction: 'rtl',
});

const RootComponent = () => (
    <RTL>
        <MuiThemeProvider theme={theme}>
            <div>
                <TextField label="name"/>
            </div>
        </MuiThemeProvider>
    </RTL>
);

export default RootComponent;

After these configs I got the rtl styles in my project.

Scarface answered 19/5, 2018 at 14:1 Comment(1)

Your answer is exactly right, but I think because of you bad style type you got down vote, I spend 7 hours and could not handle the RTL support, the main documentation is very bad for understanding. but with your answer in 15 min I handle it. thanks a lot. – Hirokohiroshi 5/7, 2018 at 23:22

Thank you @ali-ghafoori for your answer it helps me :),

BTW there is a solution inside material-ui docs

import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
import rtl from 'jss-rtl'

const jss = create({
  plugins: [...jssPreset().plugins, rtl()],
});

export default function App() {
  return (
    <StylesProvider jss={jss}>
      ...
    </StylesProvider>
  );
}

Activator answered 14/12, 2019 at 10:1 Comment(0)

[NOTE] no errors in console

Recommended topics

Hot tags