Menu
I want to use rtl layout in my react application. I have used material-ui next version to integrate this application. I have used below code to make application layout rtl. Some components work properly in the rtl layout but some components doesn't affected.
/**
* App.js Layout Start Here
*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { MuiThemeProvider } from 'material-ui/styles';
import { IntersectingCirclesSpinner } from 'react-epic-spinners';
import { IntlProvider } from 'react-intl';
import { Redirect, Route } from 'react-router-dom';
import { NotificationContainer } from 'react-notifications';
// app routes
import Dashboard from '../routes/dashboard';
import AppSignUp from '../routes/AppSignUp';
// App locale
import AppLocale from '../lang';
// themes
import lightTheme from './themes/lightTheme';
import darkTheme from './themes/darkTheme';
class App extends Component {
state = {
loading: true
}
componentDidMount() {
let self = this;
setTimeout(() => {
self.setState({ loading: false });
}, 1000);
}
render() {
const { locale, darkMode, rtlLayout } = this.props.settings;
if (this.state.loading) {
return (
<div className="d-flex justify-content-center">
<IntersectingCirclesSpinner color="red" className="rct-loader" />
</div>
);
}
const currentAppLocale = AppLocale[locale.locale];
let theme = '';
if (darkMode) {
theme = darkTheme
} else {
theme = lightTheme
}
if (rtlLayout) {
theme.direction = 'rtl'
} else {
theme.direction = 'ltr'
}
return (
<MuiThemeProvider theme={theme}>
<IntlProvider
locale={currentAppLocale.locale}
messages={currentAppLocale.messages}
>
<React.Fragment>
<NotificationContainer />
<Route path="/dashboard" component={Dashboard} />
<Route path="/signup" component={AppSignUp} />
</React.Fragment>
</IntlProvider>
</MuiThemeProvider>
);
}
}
// map state to props
const mapStateToProps = ({ settings, authUser }) => {
const { user } = authUser;
return { settings, user };
};
export default connect(mapStateToProps)(App);
It doesn't work properly also i have added
<html dir="rtl">...</html>
503
(1) Don't mutate the theme directly, use getMuiTheme instead:
themeWithDirection = getMuiTheme(theme, { direction: 'rtl' });
Based on: https://github.com/mui-org/material-ui/issues/1926#issuecomment-192736335
(2) Create the RTL component as shown in the Material-UI documentation and put it around your root component:
function RTL(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
{props.children}
</JssProvider>
);
}
return (
<RTL>
<MuiThemeProvider theme={themeWithDirection}>
{/* your component code */}
</MuiThemeProvider>
</RTL>
);
Props to this answer for explicitly showing what to do with the RTL function.
70
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
