简介
Element UI是一套非常完善的前端组件库,但是如何个性化定制其中的组件样式呢?今天我们就来聊一聊这个
举例
就拿最常见的按钮el-button来举例,一般来说默认是蓝底白字。效果图如下 可是我们想个性化定制,让他成为粉底红字应该怎么办呢?
方法1
使用行内样式,直接设置el-button的样式
优点:使用浏览器工具直接定位到影响样式的属性名或者类名,使用style直接修改,方便易懂缺点:只修改一俩个样式还行,大面积修改的话会让标签显的很乱。不美观
方法2
使用深度选择器,在style标签中修改样式,深度选择器有以下三中
>>>(适用于css样式) /deep/(适用于less样式):deep()(适用于scss样式)
:deep(.el-button) {
color: red;
}
效果图
精彩文章
发表评论