前端开发的同学们或许会遇到这样的问题：产品中需要实现某项功能，常用的 elementui、antd 等组件库中确实有差不多功能的组件。但实际上这些组件可能并不能满足你的功能，或多或少都需要你去看看如何修改它才能满足你的需求。

比如我曾遇到过 element-ui 中的「树形控件」暴露出的参数没有我需要的（获取参数）；或者是「对话框」组件我需要给它的 body 加上上下两条 border 等（样式修改）；还有「级联选择器」的多选可搜索功能：需要修改级联看板使它保持展开，且当子节点全部选中时，不展示全部子节点 tag 而只展示它的父节点 tag（源码无此功能）。

例如，我需要的功能是左二（因为我不想选项过多时 tag 占得位置太大），而原组件如左一。我截了两张图对比：

关于组件库可能要修改的地方，我将它们分为以下五类可供参考：

• 样式问题
• 组件暴露的参数和方法不充分（源码中存在）
• 可利用部分功能，其余功能要自己开发封装
• 2+ 个组件之间的联动，多合一
• 完全没有符合的组件

下面详细说说这些问题，以及如何解决这些问题。如果有不满足或更好的建议，欢迎指出。

1、组件样式问题

当修改单个文件的样式时，以 less 为例，如果你想要修改组件的样式，可以使用 /deep/ 或 >>> 来深度选择到你要修改的样式（这能够帮你省去一大串的类名）。

.dialog-wrapper {
    /deep/.el-dialog__body{
     border: solid 1px #999;
    }
}

如果你要修改全局的样式，第一种方法，你可以在全局样式文件中写样式覆盖，引入到 main.js 中即可全局生效。如下：

import "./assets/css/index.css";

第二，跟着组件库提供的『自定义主题』教程修改，一般组件库都会给出相关的教程。

2、组件暴露的参数和方法不充分

首先提出一个问题，你如何知道组件暴露的参数和方法不充分？其实答案很简单：因为我看了组件库的源码。

当我们想要获取组件的一个参数，首先是看文档中提供了哪些 Attributes、Events、Methods。如果符合需求，直接拿来用就好。如果没有你要的属性和方法，请你先去看看源码中提供了哪些东西没有向外暴露出来的，但是我们能拿来用的。

举个