依赖于第三部分库或框架的组件库。

Question

该 赏金 到期 三天之内. 对这一问题的回答有资格获得 +50 名誉赏金。 麦克 想要 惹人注目 对这个问题。

我知道这个问题有点模糊，但我真的很想听听别人的想法，也想听听解决这类问题的具体办法

比方说，我有一个包含按钮、输入字段和更复杂组件的组件库，我想通过npm发布，这样我就可以在许多不同的 "父项目 "中使用它，以便在我所有不同的应用程序中获得相同的外观和感觉。

假设组件库和所有的 "父项目 "都是用React构建的。它们也可以用Vue或Angular或其他东西来构建，但我们还是用react吧

我们也可以说，我是一个很喜欢material-design的外观和感觉的人，所以在我的组件库中，我想在一些组件中使用material-ui，但不是所有的组件。我还是想把material-ui组件包装起来，以确保我所有的父项目都以同样的方式使用它们，而且它们可能会被定制等等。

我们还可以说，我希望用户能够将某些父项目的主题改为暗色模式，或者是影响排版的东西或其他东西。因此，组件的风格取决于所选的主题，而父项目也可能是如此。

我们也可以说，既然我这么喜欢素材设计，我可能也想直接在父项目中使用。但只是在一些项目中使用。

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

1. 是否可以在父项目中完全摆脱material-ui的依赖。也就是不要求父项目提供一个版本，不与npm包一起发布？
2. 如果不可能的话。从父项目中需求一个peerDependency和从组件库中供给一个peerDependency的利弊是什么？
3. 如何在处理主题的同时又能很好地封装组件？谁负责设置主题？什么时候会在父项目中设置主题样式？我是否应该将选定的主题发送给组件？我是否必须复制主题样式才能使组件封装好？

TLDR;我想要一个依赖于另一个第三部分库的组件库，并希望尽可能地保持我的组件封装。有什么好的结构可以做到这一点？

Answer 1

创建你自己的组件文件夹，其中包含你的组件，比如Button，然后在 material-ui button周围封装任何你选择的第三方组件。这样一来，你所创建的组件库就可以作为一个npm模块进行测试、重用&也可以遵循一个模式，在Container组件中作为项目组件使用。这主要是最大限度地减少了创建初始组件的开销，而这些组件已经在第三方库中可用了.同时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;