Ant design vue Popover组件样式设置无效

审查元素的时候在.ant-popover-title里加上background-color:red;是有效的，但是我自己写代码的时候，这样写

/deep/.ant-popover-title{background-color:red;
}

无效，折腾了半天，死活不起作用，最后查资料是把<style lang="less" scoped>里的scoped去掉，
然后再把/deep/去掉就可以了
这样做影响了其他界面，但好歹对我这个项目没啥影响，可以这样用，但还是有点风险。
查了更详细的资料https://www.antdv.com/components/tooltip-cn/#API后，发现popover把代码渲染到了body里，这样就和我当前组件平级了。查api，发现了这样一个getPopupContainer参数，于是代码做了如下改动

<a-popover trigger="click" placement="bottomRight" :getPopupContainer="triggerNode => {return triggerNode.parentNode;}
">

getPopupContainer的作用是设置浮层渲染父节点，默认渲染到 body 上。

这样再改css样式。

<style lang="less" scoped>/deep/ .ant-popover-title{background-color:red;}
</style>

这样就可以了
我在我项目中的代码如下：

Ant design vue Popover组件样式设置无效相关推荐

Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
Ant Design 中覆盖组件样式
使用场景: 比如ant design中的抽屉Drawer这个组件,由于组件库中的样式是给了padding为25px,但是我当前的需求是不需要padding,那么就需要写样式覆盖掉之前组件定义的样式. ...
ant design 的table组件中设置单元格背景颜色
有时候我们在业务中会遇到一个表格,里面有很多数据, 这时候憨憨产品跑过来说,其中一个数据需要判断, 比如 age >18 的,背景颜色要标红, 18<age> 25的背景颜色要标 ...
Ant Design Vue UI组件中改变textarea的宽度和高度
textarea给宽度不能改变.只能改变高.给样式也没效果,只能改变高度.后来发现在form表单中可以改变textarea的宽度. label-col是改变form表单里面的组件距离左边的距离.数值越 ...
ant design vue日期组件怎么清空（a-range-picker，a-date-picker）
a-range-picker <a-range-pickershowTime:placeholder="['开始时间', '结束时间']"format="YYYY- ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
antd design vue分页组件
我们在使用分页组件的时候可以有两种方法: 第一种是直接用表格()的自定义:pagination属性最方便:如下图所示: 第二种是分页组件这里我总结的是第二种方法的使用,由于是 Ant Design ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...

Ant design vue Popover组件样式设置无效

Ant design vue Popover组件样式设置无效相关推荐

最新文章

热门文章