可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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.

回答2:

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