Question

我们的Web应用程序已品牌化，我们的品牌化是动态的。这意味着管理员可以随时添加新品牌（上传CSS和徽标以及新品牌名称）。

我们的品牌逻辑基于URL。我们希望每个品牌都有不同的CSS文件。

if(window.location.href.indexOf('.xyaz.com') >= 0)
  //load 'App.xyaz.css'

如何在React中动态加载CSS。

Answer 1

从技术上讲，可以使用JavaScript进行以下操作：

const styleSheetLink = document.createElement("link");
styleSheetLink.type="text/css";
styleSheetLink.rel="stylesheet";
styleSheetLink.charset="UTF-8";
styleSheetLink.href="/App.xyaz.css";
document.head.appendChild(styleSheetLink);

但是我不确定这通常是“正确”的方式

Answer 2

从答案Here中激发灵感

实施HOC（高阶组件）

import React, { Component } from "react";

const withBrandedCss = (WrapComponent) => {
  return class extends Component {
    componentWillMount() {
 const domain = "xyz" // fetch domain name here and used it if your CSS name convention is supported;
      if (window.location.href.indexOf("xyz.com") > 0) require("../../BrandedCss/App.1.css");
      else require("../../BrandedCss/App.css");
    }

    render(){
        return (<WrapComponent {...this.props}></WrapComponent>)
    }
  };
};

export default withBrandedCss;

用法：

export default withBrandedCss(App);

根据URL加载不同的CSS

2 个答案: