审查元素的时候在.ant-popover-title里加上background-color:red;是有效的,但是我自己写代码的时候,这样写
/deep/.ant-popover-title{background-color:red;}
无效,折腾了半天,死活不起作用,最后查资料是把<style lang="less" scoped>
里的scoped去掉,
然后再把/deep/去掉就可以了
这样做影响了其他界面,但好歹对我这个项目没啥影响,可以这样用,但还是有点风险。
查了更详细的资料/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>
这样就可以了
我在我项目中的代码如下: