如何在React App中使用Material-UI的RTL布局

本文介绍了如何在React App中使用Material-UI的RTL布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的react应用程序中使用rtl布局.我使用了material-ui的下一版本来集成此应用程序.我使用下面的代码使应用程序布局为rtl.某些组件在rtl布局中可以正常工作，但某些组件不受影响.

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);

它也不能正常工作

<html dir="rtl">...</html>

推荐答案

(1)不要直接更改主题，而应使用getMuiTheme:

(1) Don't mutate the theme directly, use getMuiTheme instead:

themeWithDirection = getMuiTheme(theme, { direction: 'rtl' });

基于: https://github.com/mui -org/material-ui/issues/1926#issuecomment-192736335

(2)创建一个RTL组件，如 Material-UI文档并将其放在您的根组件周围:

(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>
);

建议此答案，以明确显示如何处理RTL函数.

Props to this answer for explicitly showing what to do with the RTL function.

这篇关于如何在React App中使用Material-UI的RTL布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！