Menu
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'));
i tested :
const theme = createMuiTheme({ direction: "rtl", ...});
//no change , still ltr
or
<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! :) )
883
React Data Grid: RTL - Right To Left.
The Toolbar is a flex container, allowing flex item properites to be used to lay out the children. classes. object. Override or extend the styles applied to the component.
The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.
I acted in following order:
JSS Provider same as you.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.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With