
使用vue提供的深度选择器,可以在组件局部修改父组件的样式。
想要修改组件样式, 首先要定位到组件样式的位置. 比如, 我想将输入框修改为圆角, 背景修改为透明, 那么我就得先找到input样式在哪里定义的.

显然, 是在.el-input__inner中定义了input的样式, 在确定了父组件之后, 就可以使用深度选择器局部修改样式了.
为什么强调是局部修改. 因为如果你的声明是这样
, 不加范围修饰scoped, 直接修改样式同样可以达成目的. 但是这样将会是全局修改, 会影响到所有其他的组件.
如果你的样式代码使用的是css, 那么使用>>>就可以将子组件的样式代码覆盖父组件的样式代码.
.conBox >>> .el-input__inner{
padding:0 10px;
}
我是用的是scss, 尝试/deep/, 并未生效, 使用::v-deep生效
完整代码
<template>
<div class="login-container">
<div class="login-window">
<div class="login-font">
<h1>
Login
h1>
div>
<div class="login-form">
<div class="login-input">
<el-input prefix-icon="el-icon-user" placeholder="请输入账号" />
div>
<div class="login-input">
<el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password />
div>
<div class="login-button">
<el-button type="primary" round>登 录el-button>
div>
div>
div>
div>
template>
<style lang="scss" scoped>
.login-container{
height: 100%;
width: 100%;
background-image: url('https://plus.hutool.cn/bing');
background-position: 100%;
.login-window{
width: 505px;
height: 100%;
background: rgba(0, 106, 180, 0.4);
box-shadow: 0px 38px 51px 0px rgba(13,0,40,0.6100);
position: absolute;
right: 100px;
.login-font{
margin-top: 100px;
color: white;
font-size: 180%;
font-family: inherit;
text-align: center;
}
.login-form{
padding: 0px 20px 0px 20px;
.login-input{
margin: 60px 0px 60px 0px;
.el-input{
::v-deep .el-input__inner {
height: 55px;
border-radius: 25px;
background: rgba(33, 35, 36, 0.4);
}
::v-deep .el-input__icon {
line-height: 50px;
}
}
}
.login-button{
text-align: center;
::v-deep .el-button.is-round{
border-radius: 40px;
padding: 18px 60px;
font-size: 25px;
}
}
}
}
}
style>
效果
