React RTL。条件付きインポートCSS

Question

ReactアプリケーションにRTLを組み込んでいます。LTR用とRTL用の2つのCSSファイルがあります。ユーザーが英語版またはアラビア語版を選択する場所からドロップダウンがあります。

ユーザーがアラビア語バージョンを選択したときにRTLCSSファイルを条件付きでインポートし、ユーザーが英語を選択したときに通常のCSSファイルに戻す方法に固執しています。

これに関するヘルプやガイダンスは大歓迎です

私はReact＆webpackを使用しています

よろしく

Answer 1

私は以前にこの問題に直面しました。メインコンテナがマウントされているときに言語をチェックします。アラビア語の場合はアラビア語のCSSファイルが必要ですが、そうでない場合は他のファイルが必要です。

例：

class Main extends Component {
    componentWillMount() {
         if(this.props.language === 'ar') {
            require('arabic.css');
         } else {
            require('english.css');
         }
    }
}

私はReduxも使用しています。これにより、初期言語またはデフォルト言語を簡単に取得でき、それに応じて他のすべてのコンポーネントも変更できます。

Webpack構成ファイルでCSSローダーが構成されていることを確認してください。