How to use rtl layout of material-ui next in react app

问题

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>

回答1:

(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.

来源：https://stackoverflow.com/questions/49919565/how-to-use-rtl-layout-of-material-ui-next-in-react-app

标签

reactjs

material-ui