文章/答案/技术大牛

发布

社区首页 >问答首页 >material-ui jss-rtl -使用jss-rtl后，我的页面仍然是LTR

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

Stack Overflow用户

提问于 2018-04-13 04:29:07

回答 2查看 3.8K关注 0票数 7

我在我的react项目中使用了material-ui、next和jss-rtl，但是有一个问题，在使用<JssProvider ...>之后，页面仍然是ltr

-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时，它不再工作了……(抱歉，英文输入不好-我是波斯语！:)

reactjs

material-ui

right-to-left

jss

回答 2

Stack Overflow用户

发布于 2018-05-19 22:01:37

我的行动顺序如下：

创建与您相同的JSS Provider。
创建在其中包含JSS Provider的组件

<代码>G29

我认为你需要在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样式。

票数 13

Stack Overflow用户

发布于 2019-12-14 18:01:18

感谢@ali-ghafoori的回答，这对我很有帮助:)，

顺便说一句，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>
  );
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49805381

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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