如何在具有多个租户的React应用程序中最佳地构造样式/组件自定义

Question

我正在构建一个由多个组织使用的应用程序。每个组织在他们自己的子域E.G访问应用程序。 google.myapp.com，microsoft.myapp.com。它们都使用完全相同的bundle，但是每个子域上没有运行单独的版本。

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

我的设置是在create-react-app webpack配置的修改版本上运行的React应用程序。

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

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

我知道这是一个非常广泛的问题，但我真的不知道构建这个问题的最佳方法。任何建议非常感谢！

Answer 1

我最终将我的应用程序迁移到styled-components并实现了theme。

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

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,
    [...]
  },
};

然后我将我的应用程序包装在<ThemeProvider>提供的styled-components组件中。我将一个函数传递给theme prop，它解决了哪个租户正在使用app（从后端获取一个ID），然后返回要使用的主题对象。

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

辅助函数：

function getPlatformTheme(appId) {
  switch (appId) {
    case 'tenantOne':
      return THEMES.tenantOne;
    case 'tenantTwo':
      return THEMES.tenantTwo;
    default:
      return THEMES.default;
  }
}

从那里开始，它只是使用主题中的变量设置应用程序样式而不是硬编码颜色。这就是我迁移到styled-components的原因

例：

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 };
`;

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