Solve the problem that the element UI custom CSS style does not take effect

Time:2021-10-20

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 is roughly like this

在这里插入图片描述

I hope so

在这里插入图片描述

Through the developer tool of Google browser, find the class name of the corresponding style.el-input__inner
But found againhtmlMiddle frontel-inputThe tag resolves to this, wheremySearchIt was added by ourselves, so we can find itmySearchThe class name of the child element to be modified is.el-input__inner

在这里插入图片描述

在这里插入图片描述

If a child element is selected through the CSS selector, it cannot act on the elements inside the child element
The following uses the style syntax
The following is the wrong way of writing:


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

How to make it work

Scheme 1: add one in the middle/deep/can


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

Scheme 2: removescoped, this method can achieve results, but it is not recommended!

In general, that’s why it can’t take effectscopeAs a result, the scope of action cannot affect the internal sub components. The last way to solve the problem is to add/deep/Enable it to act on subcomponents

This is the end of this article about the solution to the ineffectiveness of elementui custom CSS style. For more information about the ineffectiveness of elementui style, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!