如何深度定制一个element-plus组件？

Question

我正在尝试以库 element-plus 作为基础构建自己的组件。

到目前为止，当涉及到诸如颜色之类的简单内容时，我取得了巨大的成功，这些内容可以轻松覆盖转发默认主题

但是，当涉及到内置组件时，我发现自己陷入了困境。

例如，警报组件默认情况下是可以自定义的。

我能够使用 css 修改颜色和形状，以及使用内置 API 来自定义关闭图标，例如。

警报组件图片

但是，到目前为止，我未能更改 element-plus 提供的成功/信息等图标，因为它们是以编程方式添加的在组件代码中。此外，这个图标的颜色是从背景继承的，我无法单独更改它。

我的警报组件在这里

Alert 组件的来源可以在这里

找到

而且它似乎元素加组件无法进一步自定义他们明确允许您修改。

我错过了什么吗？这可以通过扩展组件来实现吗？或者通过重CSS？

非常感谢，

Answer 1

我正在致力于自定义 Element Plus 组件的样式，特别是 和 。我遇到了一些挑战，想分享对我有用的方法。

对于，我发现直接定位和样式化元素（例如表头或边框）无法按预期工作。相反，我使用浏览器的开发人员工具检查了组件的类和 CSS 自定义属性。然后，我修改了相关的CSS变量以实现所需的样式。这是一个例子：

.el-table {
    --el-table-header-text-color: #2e2e2e;
    --el-table-header-bg-color: #E6F0FF;
    --el-table-border: none;
    --el-table-row-hover-bg-color: #e9e9e9;
    --el-table-text-color: #2e2e2e;
}

对于 组件，直接将样式应用于组件的类即可，无需修改 CSS 变量。这是一个例子：

.el-button {
    padding: 16px 40px;
    height: auto;
    width: auto;
    background: gray;
}

我希望这对其他元素加组件也有帮助。