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文件的方法，而不是在上述import语句中指定.css文件？

谢谢

Answer 1

考虑使用cssInJs解决方案。流行的库有：emotion和styled-components，但也有其他库。

我通常建议使用cssInJs解决方案，但对于您尝试执行的解决方案特别有用。

例如，在Emotion中，他们具有专门为此目的构建的工具-contextTheme。

cssInJs的基本含义是，不要使用其他静态的CSS文件，而要使用Javascript的所有功能，从您的JavaScript代码生成所需的CSS规则。

Answer 2

容易-我以前也有类似经历。

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

}

根据条件在ReactJS应用程序中动态加载.css

2 个答案: