reactjs - 主题 react Multi-Tenancy 应用程序

Question

我在这个问题上苦苦挣扎了一段时间。

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

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

执行此操作的最佳解决方案是什么？

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

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

谢谢

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())