主题反应多租户应用程序

Question

我为此问题苦苦挣扎了一段时间。

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

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

什么是最好的解决方案？

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

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

谢谢

Answer 1

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

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

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

如果由于某些原因您无法使用Ant Design，那么可以使用另一个软件包来处理css文件并创建一个color.less文件，该文件仅包含与诸如背景色之类的颜色相关的css规则，颜色等可以在index.html中导入，现在您可以使用某些用户界面（使用api less.modifyVars()）更改这些颜色变量