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

©2020 ioDraw All rights reserved
From recruitment to resume to find a fresh university student in the company Thread safety and synchronous thread vue element-ui Drop down menu with search python Method of generating random string -random modular Network structure diagramCCF A series of questions --2016 year 4 Month 1 Calculation of break point Vue Element-ui Form Form usage to json Adding multiple key value pairs dynamically in , And how to get it json Object key【 Recommended benefits 】c++ use easyx Making pixel birds , Simple hands on games CobaltStrike Environment building and client connecting to server