时间戳

首页 > 解决方案 > 依赖于第三方库或框架的组件库

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

问题描述

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

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

假设我非常喜欢材料设计中的外观和感觉，所以在我的组件库中，我想在我的一些组件中使用 material-ui，但不是全部。我仍然想包装 material-ui 组件，以确保我所有的父项目都以相同的方式使用它们，并且它们可能是定制的等等。

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

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

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

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

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

标签： reactjscomponentsmaterial-uiencapsulationnpm-publish

解决方案

创建您自己的 components 文件夹，其中包含您的组件（如 Button），并围绕 material-ui 按钮/您选择的任何第三方组件进行封装。这样，您正在创建的组件库可以是可测试的，可作为 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;

推荐阅读