React RTL. Conditional Import CSS

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.

Use React.Lazy and React.Suspense to conditionally import them.

Read this article