For example, there is an input box
<el-input ref="mySearch" class="mySearch" size="small" placeholder=" Please input the content "
suffix-icon="el-icon-search" v-model="input1"> </el-input>
If there is no custom style, the input box will look like this
I hope so
Developer tools through Google browser , Find the class name of the corresponding style .el-input__inner
But find out again html In front of el-input The tag resolves to this , among mySearch I added it myself , So we can find it mySearch
The elements of , What needs to be modified is that the class name of the child element is .el-input__inner
If you pass between css The selection of child elements by the selector of cannot affect the elements inside the child
The following is used stylus How to write grammar
Here is the wrong way to write it ：
<style scoped lang="stylus" rel="stylessheet/stylus"> .mySearch
.el-input__inner border-radius 20px</style>
How to make it work
<> Scheme 1 ： You need one in the middle /deep/ can
<style scoped lang="stylus" rel="stylessheet/stylus"> .mySearch /deep/
.el-input__inner border-radius 20px</style>
<> Scheme 2 ： Remove scoped, This method can achieve the effect, but it is not recommended !
Generally speaking, this is the reason why it can't take effect scope Causes scope to fail to work on internal subcomponents , The last way to solve the problem is by adding /deep/ Enables it to act on subcomponents
Technology
Daily Recommendation