material-ui jss-rtl - после использования jss-rtl моя страница все еще остается LTR

Я использую material-ui, next и jss-rtl в своем проекте react, но есть проблема: страница все еще остается ltr после использования <JssProvider ...>

-rtl код компонента:

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 Код:

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'));

[ПРИМЕЧАНИЕ] в консоли нет ошибок

я тестировал:

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

//no change , still ltr

or

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

Кто-нибудь знает, что случилось? Обратите внимание, что этот код работал в более ранней версии моего проекта в Windows 10. Когда я изменил свою ОС на Linux Ubuntu 16.04 (LTS) и установил Nodejs, он больше не работал ... (извините за плохой набор текста по-английски - я Персидский! :))


reactjs material-ui right-to-left jss
person R8_    schedule 12.04.2018    source источник
comment
Кто-нибудь помогите!! :)   -  person R8_    schedule 14.04.2018

Ответы (2)


arrow_upward
13
arrow_downward

Я действовал в следующем порядке:

  1. создайте JSS Provider такого же, как вы.
  2. создать компонент, включающий в него JSS Provider

Я думаю, вам нужно добавить несколько пакетов в packagejson файл или, возможно, обновить react или material-ui.

Вот мой:

// 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;

После этих конфигов я получил rtl стилей в свой проект.

person ali ghafoori    schedule 19.05.2018
comment
Ваш ответ совершенно правильный, но я думаю, что из-за вашего плохого стиля, вы проголосовали против, я потратил 7 часов и не смог справиться с поддержкой RTL, основная документация очень плохая для понимания. но с вашим ответом через 15 мин я справлюсь. большое спасибо. - person AmerllicA; 06.07.2018

arrow_upward
0
arrow_downward

Спасибо @ ali-ghafoori за ответ, он мне помогает :),

Кстати, решение есть в документах material-ui

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>
  );
}
person hadi kashlan    schedule 14.12.2019