material-ui jss-rtl-使用jss-rtl之后，我的页面仍然是LTR [英] material-ui jss-rtl - after using jss-rtl my page is still LTR
问题描述
我在react项目中使用了material-ui，next和jss-rtl，但是存在问题
使用<JssProvider ...>
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组件代码:
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代码:
-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]控制台中没有错误
我测试过:
[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!
有人知道怎么了吗? 请注意，此代码在Windows 10上的较早版本的项目中运行.当我将操作系统更改为Linux Ubuntu 16.04(LTS)并安装Nodejs时，它不再起作用. (很抱歉输入英文不正确-我是波斯人！:))
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! :) )
推荐答案
我按照以下顺序进行操作:
I acted in following order:
- 创建与您相同的
JSSProvider. - 创建一个包含
JSSProvider的组件
- create a
JSSProvidersame as you. - create a component witch include
JSSProviderin it
我认为您需要向packagejson文件中添加一些软件包，或者也许更新react或material-ui.
I think you need to add some packages to packagejson file or maybe update react or 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样式.
After these configs I got the rtl styles in my project.
这篇关于material-ui jss-rtl-使用jss-rtl之后，我的页面仍然是LTR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
