React RTL. Conditional Import CSS

Question

I am incorporating RTL to my React application. I have two CSS files, one for LTR and one for RTL. I have a drop down from where user select either English version or Arabic

Answer 1

I have faced this problem before, What I have done is that when my main container is mounting, I check for the language, if it's Arabic, I require the Arabic CSS file, if not I require the other.

Example:

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

I'm using Redux as well, which makes it easier for me to get the initial or default language, and change all the other components accordingly as well.

Just make sure you have the CSS loader configured in your webpack configuration file.