反应 RTL。有条件导入 CSS

Question

我正在将 RTL 合并到我的 React 应用程序中。我有两个 CSS 文件，一个用于 LTR，一个用于 RTL。我从用户 select 那里有一个英文版或阿拉伯文版的下拉菜单。

我对如何在用户 select 阿拉伯语版本时有条件地导入我的 RTL CSS 文件以及在用户 select 英语时返回正常 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 加载程序。

Answer 2

使用 React.Lazy 和 React.Suspense 有条件地导入它们。

Read this article

反应 RTL。有条件导入 CSS

React RTL. Conditional Import CSS

css

right-to-left

reactjs