反应RTL。有条件导入CSS

Question

我正在将RTL合并到我的React应用程序中。我有两个CSS文件，一个用于LTR，一个用于RTL。我从下拉菜单中选择用户使用的是英文版本还是阿拉伯版本。

我坚持认为，当用户选择阿拉伯语版本时如何有条件地导入我的RTL CSS文件，而当用户选择英语时如何恢复为普通CSS文件。

任何帮助或指导，将不胜感激

我正在使用React＆webpack

问候

Answer 1

我以前遇到过这个问题，我所做的是在安装主容器时，检查语言，如果是阿拉伯语，则需要阿拉伯语CSS文件，如果不需要，则需要另一个CSS文件。

例：

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

我也使用Redux，这使我更容易获得初始或默认语言，并相应地更改所有其他组件。

只需确保在webpack配置文件中配置了CSS加载器即可。