Thought it was a native bug. Then I met again, when using el-select, modifying the style of el-select-dropdown doesn't work.

Later, when reviewing the elements, I found that the rendered dom element was not in the #app element at all. It turns out that the el-select-dropdown element in El-select will be separated from #app after rendering. You cannot use the depth selector to locate elements.

After finding the root of the problem, we changed the search method. Before, we searched for the problem that the style of elementUi component was not effective, and we didn't find a suitable solution. Now let's search for el-select component style modification. Bingo, finally found the right blog post, perfect solution! The method is as follows:

Add an attribute on el-select: popper-append-to-body="false ",which is used to put the rendered element into the #app element.

Then use the depth selector to modify it.

Reference blog post: /QQ _ 4474746 1/ Articles/Details/106 140453.

If not, you can see if it is the above reasons, and then choose the appropriate keyword search scheme.

Postscript 1: the above is the modification method of el-select style. Sometimes, other component styles are not effective. After analysis and solution, it can be handled perfectly:

Will (male name)

(It is not recommended to use the /deep/ depth selector, because it is only suitable for chrome browsers and has browser compatibility problems. )

Postscript 2: method of modifying el drop-down style;

Add the class name to the El drop-down menu, and then

Postscript 3: modify the el date picker style:

Add popper-class and set a new style, such as: popper-class="date-style ".