修改第三方组件默认样式

深度选择器

修改el-input的样式:

html 复制代码
<el-input class="input-area"></el-input>

查看DOM结构:

原本使用 /deep/ 但是可能不兼容 使用 :deep

javascript 复制代码
.input-area {
  :deep(.el-input__inner){
    background-color: blue;
  }
}

将 input 框背景色改为蓝色

相关推荐
梵得儿SHI几秒前
Vue 高级特性:组件高级用法(动态组件、异步组件、组件缓存 keep-alive)
前端·javascript·vue.js·keep-alive·异步组件·动态组件·vue组件高级特性
lili-felicity6 分钟前
React Native for Harmony 数字验证码输入功能
javascript·react native·react.js
ℋᙚᵐⁱᒻᵉ鲸落7 分钟前
【Vue3】Element Plus 表单显示自定义校验错误
前端·javascript·vue.js
程序员小寒8 分钟前
聊一聊 CommonJS 和 ES6 Module
前端·ecmascript·es6
lili-felicity10 分钟前
React Native for Harmony:消息列表页面未读标记完整实现
javascript·react native·react.js
切糕师学AI11 分钟前
Vue 中的响应式布局
前端·javascript·vue.js
晷龙烬15 分钟前
Vue组件使用三步走:创建、注册、使用(Vue2/Vue3双版本详解)
前端·javascript·vue.js
2501_9481226319 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 设置页面
javascript·react native·react.js·游戏·ecmascript·harmonyos
2501_9481226321 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 意见反馈实现
javascript·react native·react.js·游戏·ecmascript·harmonyos
是罐装可乐24 分钟前
前端架构知识体系:深入理解 sessionStorage、opener 与浏览器会话模型
开发语言·前端·javascript·promise·语法糖