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

Question

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

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

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

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

我还需要根据查看应用程序的组织(导航栏元素等)显示某些元素。我希望构建只包含 bundle 中每个组织的相关 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 计算出哪个租户正在使用该应用程序(具有从后端获取的 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 };
`;

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