Solution to elementui's el-popover style modification not taking effect

When using element-ui, there is a commonly used component, that is el-popover, but the style and usage in the element-ui official document are relatively limited, and the style needs to be changed when using it

I used el-popover in my project, but I have not been able to modify the style. Let's take a look at what the official documentation says.

Add a class name, string type, ok, add one

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="my-popover"
    >

To set the style

<style lang="scss" scoped>
	.my-popover{
		padding:20px;
	}
</style>

The result is that the setting was not successful!
Is it because of scope? Try again without scope!

<style>
my-popover{
    padding:10px 30px;
}
</style>

Still no effect! ! !
After crazy experiments and searching online!
The final writing method is this: .el-popover.my-popover, with the prefix .el-popover, otherwise it will not take effect. And can not be scoped

<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

Modification successful!

This is the end of this article about the solution to the problem that the modified style of elementui's el-popover does not take effect. For more related content about el-popover style not taking effect, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!