Solve the problem that ElementUI custom CSS style does not take effect

For example, there is an input box

<el-input
        ref="mySearch"
        class="mySearch"
        size="small"
        placeholder="Please enter content"
        suffix-icon="el-icon-search"
        v-model="input1">
</el-input>

If no custom style is added, the input box will look like this

I hope so

Through the developer tools of Google Chrome, find the class name of the corresponding style.el .el-input__inner
But I found that the el-input tag in front of html was parsed into this, where mySearch was added by myself, so we can find the element of mySearch , and the sub-element class name that needs to be modified is .el-input__inner

If you select child elements through CSS selectors, you cannot apply it to the elements inside the child elements. The following uses stylus syntax. The following is an incorrect way of writing:

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch .el-input__inner
        border-radius 20px
</style>

How to make it work

Solution 1: You need to add a /deep/ in the middle to

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch /deep/ .el-input__inner
        border-radius 20px
</style>

Solution 2: Remove scoped . This method can achieve the desired effect but is not recommended!

In general, the reason why it does not work is that this scope causes the scope to not work on the internal sub-components. The final solution to the problem is to add /deep/ to make it work on the sub-components.

This is the end of this article about the solution to the problem of ElementUI custom CSS style not taking effect. For more relevant content about ElementUI style not taking effect, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!