主题反应多租户应用程序

Question

我正在为这个问题苦苦挣扎。

在我的公司，我们正在启动一个新的多租户 React SPA 应用程序，其中每个租户对应一个不同的客户端。

基于合同的客户端可以进行自定义，从徽标或颜色到（很少）自定义样式的组件，例如具有不同元素位置的自定义标题、背景图像而不是颜色等等。

最好的解决方案是什么？

我一直在想这些解决方案，但我真的不知道是否正确：

• 为每个客户端构建一个包含所有不同样式属性的自定义主题组件
• 为每个客户端构建一个自定义组件库（可以扩展我们的更新） 在构建过程中通过 webpack 注入
• 通过 api 获取主题并切换为“客户端的自定义组件”
• 通过 api 获取主题（主题包含用于创建自定义组件的道具）

谢谢

Answer 1

演示https://antd-live-theme.firebaseapp.com/

我去年开发了一个解决方案，它没有涵盖 OP 帖子中的所有要求，但用户/租户可以使用 Ant Design（React 组件库）设置基于颜色的主题。这是演示，您可以在其中设置主题变量 https://antd-live-theme.firebaseapp.com/ 基于以下包

https://github.com/mzohaibqc/antd-theme-webpack-plugin

如果您由于某种原因不能使用 Ant Design，那么还有另一个包允许您处理 css 文件并创建一个 color.less 文件，其中仅包含与背景颜色、颜色等颜色相关的 css 规则. 可以在 index.html 中导入，现在您可以使用一些 UI 更改这些颜色变量（使用 api less.modifyVars()）