reactjs - 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

或

<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 时，它不再工作了...... (抱歉英语打字不好 - 我是波斯语!:) )

最佳答案

我按照以下顺序操作:

创建一个与您相同的 JSS Provider。
创建一个包含 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 样式。

关于reactjs - Material-ui jss-rtl - 使用 jss-rtl 后我的页面仍然是 LTR，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49805381/

reactjs - Material-ui jss-rtl - 使用 jss-rtl 后我的页面仍然是 LTR

[注意]控制台中没有错误

上一篇：Reactjs 从同一目录导入

下一篇：reactjs - React - 更改 setState 中的 JSON 对象