Question

我想在我的react应用程序中使用rtl布局。我使用了material-ui下一个版本来集成这个应用程序。我使用下面的代码来制作应用程序布局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>

Answer 1

（1）不要直接更改主题，而应使用getMuiTheme：

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

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

（2）创建Material-UI documentation中所示的RTL组件，并将其放在您的根组件周围：

function RTL(props) {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      {props.children}
    </JssProvider>
  );
}

return (
  <RTL>
    <MuiThemeProvider theme={themeWithDirection}>
     {/* your component code */}
    </MuiThemeProvider>
  </RTL>
);

为this answer提供支持，以明确显示如何处理RTL函数。

如何在反应应用中使用材料-ui的rtl布局

1 个答案: