根据reactJS应用程序中的条件动态加载.css

Question

我有一个 ReactJS 应用程序，我想将其提供给多个客户端。每个客户都有独特的配色方案。我需要能够导入与特定客户端相对应的 .css 文件。

例如，如果客户端 1 登录到应用程序，我想导入 client1.css。如果客户端 2 登录到应用程序，我想导入 client2.css。一旦我验证了登录信息，我就会知道客户号码。

该应用程序包含多个 .js 文件。每个 .js 文件的顶部都包含以下内容

import React from 'react';
import  { Redirect } from 'react-router-dom';
import {mqRequest} from '../functions/commonFunctions.js';
import '../styles/app.css';

有没有一种方法可以针对这种情况动态导入 .css 文件，而不是在上面的导入语句中指定 .css 文件？

谢谢

Answer 1

很简单-我以前也遇到过类似的情况。

componentWillMount() {
  if(this.props.css1 === true) {
     require('style1.css');
  } else {
     require('style2.css');
  }

}