reactjs - NX Monorepo 使用一个 UI 组件库，具有多个具有不同主题的应用程序

Question

我们正在为 NX monorepo 开发一个设计系统， future 可能会有多个应用程序(用 nextjs 编写)，所有这些应用程序都将使用一个组件库。所有的应用程序都需要有自己的主题，但 UI 组件库中的所有组件都使用一个默认主题。UI 组件库需要访问每个应用程序的主题以覆盖默认主题。我们想要使用的是每个组件的 scss/css 模块，然后可以由每个应用程序自定义。我们可以使用哪些工具或方法/技术来实现此功能？

目录结构:

• /apps/site1/site1-theme -> { primary: 'red' }
• /apps/site2/site2-theme -> { primary: 'blue' }
• /libs/ui-lib/components

UI 库有一个默认颜色为绿色的按钮组件。当 site1 使用按钮时，site2 应该是红色和蓝色。我们可以将主题对象作为 Prop 传递给每个组件，但这会很乏味，我们宁愿能够告诉 ui 库“这是我们的主题使用它”我们使用的技术是nx/typescript/nextjs/scss

Answer 1

我们在 react nx monorepo 中解决了这个问题

我们已经使用 redux persist 创建了主题库，我们在 ThemeProvider 中为每个应用程序传递了一个来自后端的主题对象。