material-ui jss-rtl-使用jss-rtl之后，我的页面仍然是LTR

Question

material-ui jss-rtl-使用jss-rtl之后，我的页面仍然是LTR

R8_*_*R8_ 5 right-to-left reactjs material-ui jss

我使用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;

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

我测试了：

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

//no change , still ltr

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

有人知道怎么了吗？请注意，此代码在Windows 10上的较早版本的项目中运行。当我将操作系统更改为Linux Ubuntu 16.04（LTS）并安装Node.js时，它不再起作用了。波斯语！:)）

Answer 1

Ali*_*ori 10

我按照以下顺序行动：

创建一个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;

Run Code Online (Sandbox Code Playgroud)

完成这些配置后，我rtl在项目中得到了样式。

归档时间：	7 年，10 月前
查看次数：	1377 次
最近记录：	7 年，7 月前