依赖于第三方库或框架的组件库

Question

假设我有一个包含按钮、输入字段和更复杂组件的组件库，我想通过 npm 分发它，以便我可以在许多不同的“父项目”中使用它，以获得相同的外观和感受我所有不同的应用程序。

假设组件库和所有“父项目”都是在 React 中构建的。它们也可能是用 Vue 或 Angular 或其他东西构建的，但我们还是用 React 吧

还可以说，我非常喜欢 Material-Design 的外观和感觉，因此在我的组件库中，我想在某些组件中使用 Material-ui，但不是全部。我仍然想包装 Material-ui 组件，以确保我的所有父项目都以相同的方式使用它们，并且它们可能是定制的等等。

还可以说，我希望用户能够将某些父项目中的主题更改为深色模式，或者可能会影响排版或其他内容。因此，组件的样式取决于所选主题，父项目也可能如此。

还可以说，由于我非常喜欢材料设计，因此我可能也想直接在父项目中使用它。但只是在一些项目中。

现在我的问题是如何从技术上组织不同的项目。

1. 是否可以在父项目中完全摆脱对material-ui的依赖。也就是说，父项目不要求提供一个版本而不是随 npm 包一起发布一个版本吗？
2. 如果那不可能的话。需要来自父级的对等依赖与从组件库提供对等依赖有什么优缺点？
3. 我怎样才能处理主题并仍然很好地封装组件？谁负责设定主题？什么时候在父项目中设置主题样式？我应该将选定的主题发送到组件吗？我是否必须复制主题样式才能封装组件？

太长了；我想要一个依赖于另一个第三方库的组件库，并希望尽可能封装我的组件。什么是一个好的结构呢？

Answer 1

创建您自己的组件文件夹，其中包含 Button 等组件，并封装您选择的material-ui 按钮/任何第三方组件。这样，您正在创建的组件库就可以作为 npm 模块进行测试、重用，并且也遵循某种模式，并在容器组件中用作项目组件。这主要最大限度地减少了创建第三方库中已有的初始组件的开销。此外，material-ui 支持主题和变量，因此您始终可以为颜色、字体大小等创建一些变量，并在组件中使用这些变量值。

themes
     -> blue.theme.js
             $primaryColor:'blue'
     -> white.theme.js
             $primaryColor:'white'
     -> dark.theme.js
             $primaryColor:'deepBlue'

components
     -> Button.js
            <MuiButton.js />
        Button.scss
             color: $primaryColor;