IT技术 - 如何在react app中使用material-ui next的rtl布局 - 吾爱随笔录

我想在我的 React 应用程序中使用 rtl 布局。我已经使用 material-ui next version 来集成这个应用程序。我使用下面的代码来制作应用程序布局 rtl。某些组件在 rtl 布局中正常工作，但某些组件不受影响。

/**
 * 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>