简介
Element UI是一套非常完善的前端组件库，但是如何个性化定制其中的组件样式呢？今天我们就来聊一聊这个
举例
就拿最常见的按钮el-button来举例，一般来说默认是蓝底白字。效果图如下
可是我们想个性化定制，让他成为粉底红字应该怎么办呢？
方法1
使用行内样式，直接设置el-button的样式
<el-button color="pink" style="color: red">红字</el-button>
- 优点：使用浏览器工具直接定位到影响样式的属性名或者类名，使用style直接修改，方便易懂
- 缺点：只修改一俩个样式还行，大面积修改的话会让标签显的很乱。不美观
方法2
使用深度选择器，在style标签中修改样式,深度选择器有以下三中文章来源：https://www.toymoban.com/news/detail-739939.html
-
>>>(适用于css样式) -
/deep/（适用于less样式） -
:deep()（适用于scss样式）
:deep(.el-button) {
color: red;
}
效果图
文章来源地址https://www.toymoban.com/news/detail-739939.html
到了这里，关于Element UI如何自定义样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
