Reactjs 如何在具有多个租户的React应用程序中实现最佳结构样式/组件定制

我正在构建一个由多个组织使用的应用程序。每个组织在自己的子域访问应用程序，例如

google.myapp.com

，

microsoft.myapp.com

。它们都使用完全相同的捆绑包，但是，每个子域上没有单独的版本

一些应用程序样式是根据组织的品牌定制的。目前，基于URL中的子域设置全局类名，这将样式应用于需要更改颜色等的某些元素

我的安装程序是一个React应用程序，它运行在

create React app

webpack config的修改版本上

我试图实现的是一种设置，其中每个组织都有一个“主题”，主要由不同的SCSS变量组成。这些变量将改变应用程序中的核心颜色

我还需要根据哪个组织查看应用程序来显示某些元素（导航栏元素等）。 我只希望构建包中每个组织都有相关的CSS

---

我知道这是一个非常广泛的问题，但我真的不知道最好的方式来组织这个。非常感谢任何建议

我最终将应用程序迁移到并实现了

我将每个租户的主要变量存储在一个主题对象中：

export const themes = {
  tenantOne: {
    primaryOne: COLOURS.wallop,
    primaryTwo: COLOURS.wallop,
    logoBackground: COLOURS.wallop,
    secondaryOne: COLOURS.lostForest,
    secondaryTwo: COLOURS.darkPurp,
    [...]
  },
  tenantTwo: {
    primaryOne: COLOURS.red,
    primaryTwo: COLOURS.orange,
    logoBackground: COLOURS.darkerGrey,
    secondaryOne: COLOURS.darkerGrey,
    secondaryTwo: COLOURS.darkerGrey,
    [...]
  },
};

然后，我将我的应用程序包装在

样式化组件提供的
组件中。我将一个函数传递给
主题
道具，该道具计算出哪个租户正在使用该应用程序（使用从后端获取的ID），然后返回要使用的主题对象

<ThemeProvider theme={ platformBrandingHelper.getPlatformTheme(appId) }>
    <App />
</ThemeProvider>

从那时起，它只是一个使用主题中的变量而不是硬编码颜色来设计应用程序的例子。这就是我迁移到
样式化组件的原因

例如：

const Button = ({
  className,
  type,
  onClick,
  disabled,
  active,
  children,
}) => (
  <button
    disabled={ disabled }
    className={ `${ className } ${ active ? 'active' : '' }` }
    type={ type }
    onClick={ (e) => onClick(e) }
  >
    <span className="content">
      { children }
    </span>
  </button>
);

const StyledButton = styled(Button)`
  border-color: ${ (props) => props.theme.primaryOne };;
  background: ${ (props) => props.theme.primaryOne };;
  color: ${ (props) => props.theme.baseSix };
`;

const按钮=({
类名，
类型，
onClick，
残废
活跃的，
儿童
}) => (
onClick（e）}
>
{儿童}
);
const StyledButton=styled（按钮）`
边框颜色：${（props）=>props.theme.primaryOne}；；
背景：${（props）=>props.theme.primaryOne}；；
颜色：${（props）=>props.theme.baseSix}；
`;

现在，应用程序将为每个租户加载正确的主题对象，然后使用适当的颜色等对每个组件进行样式设置，因为它们都依赖于从主题传递给它们的变量

const Button = ({
  className,
  type,
  onClick,
  disabled,
  active,
  children,
}) => (
  <button
    disabled={ disabled }
    className={ `${ className } ${ active ? 'active' : '' }` }
    type={ type }
    onClick={ (e) => onClick(e) }
  >
    <span className="content">
      { children }
    </span>
  </button>
);

const StyledButton = styled(Button)`
  border-color: ${ (props) => props.theme.primaryOne };;
  background: ${ (props) => props.theme.primaryOne };;
  color: ${ (props) => props.theme.baseSix };
`;