Question

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

让我们说组件库和所有“父项目”都是在React中构建的。它们也可能是在Vue或Angular或其他版本中构建的，但让我们开始反应吧

让我们说我非常喜欢Material-design的外观，因此在我的组件库中，我想在我的部分组件中使用Material-ui，但不是全部。我仍然想包装material-ui组件，以确保所有父项目都以相同的方式使用它们，并且可以对其进行自定义等等。

我们还要说，我希望用户能够将父项目的主题更改为暗模式，或者可能会影响排版或其他因素。因此，组件的样式取决于所选主题，父项目也可能如此。

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

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

是否有可能完全摆脱父项目中的material-ui依赖关系。也就是说，不是上级项目要求提供版本并且不随npm软件包一起提供？
如果那不可能。
如何处理主题并仍然将组件封装好？谁负责设置主题？何时在父项目中设置主题样式？我应该将所选主题发送到组件吗？我是否必须复制主题样式以封装组件？

TLDR；我想要一个依赖于另一个第三方库的组件库，并希望将我的组件尽可能地封装起来。什么是一个好的结构？

Answer 1

创建一个自己的components文件夹，其中包含Button之类的组件，并封装在material-ui按钮/您选择的任何第三方组件周围。这样，您正在创建的组件库可以是可测试的，可以作为npm模块重用，也可以遵循某种模式，并在Container组件中用作项目组件。这主要是将创建第三方库中已经可用的初始组件的开销降至最低。 material-ui还支持主题化并带有变量，因此您始终可以为颜色，字体大小等创建一些变量，并在组件内部使用这些变量值。

<div style="display: flex">
  <address style="flex-grow: 1"/>
  <icon/>
</div>

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

1 个答案: