vue3+elemeent-plus, el-tooltip的样式修改不生效

如下代码中,无论如何修改el-tooltip的样式,都不能生效


    
{{ content}}
:deep(.el-popper), :deep(.el-popper[data-popper-placement^="top"] .el-popper__arrow::before) { background-color: $daping-background-color !important; } :deep(.el-popper) { width: 31.875rem !important; }

原因如下:

        element-plus中,tl-tooltip的dom结构默认是被追加body下的,故在app结构下的样式修改是不生效的;具体解决方法如下:

方法一:


    
{{ content}}
“teleported”属性设置为false,这样,默认则会不被追加到 append-to 的位置,此时修改样式即会生效

方法二:

        默认追加到body下的,但是此时可以使用popper-class属性为el-tooltip添加类名【为了不影响其他的tooltip样式,类名最好是唯一的】,然后,再另外写一个style结构,其中,一定不要添加scoped属性,最后即可随意修改el-tooltip的样式,具体代码如下:


    
{{ content}}
// 此处一定不要加scoped,另外,为了不影响其他地方的tooltip样式,此处的class命名一定要唯一

你可能感兴趣的:(vue3,tooltip的样式修改不生效,tooltip的样式修改问题)