ant design vue:tooltip组件color设置失效的解决方案

最新推荐文章于 2025-06-27 06:50:11 发布

粉末的沉淀

最新推荐文章于 2025-06-27 06:50:11 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发 ant design vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/lilycheng1986/article/details/124125301

前端开发同时被 2 个专栏收录

61 篇文章

订阅专栏

ant design vue

16 篇文章

订阅专栏

本文介绍了在Ant Design Vue版本较低时，设置color属性无效的问题及解决方法。通过修改浮层默认渲染父节点和使用/deep/穿透样式，成功改变提示框和小三角的背景色。同时提到了去除 scoped 的简单方法，但可能影响其他页面样式。最终展示了调整后的样式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可能因为我的ant design vue版本太低不支持color属性，按照官网设置color无效，各种百度终于找到了合适自己的方法：

1、修改浮层默认的渲染父节点，默认是body

2、修改提示框和小三角的样式（背景色），记得一定要加/deep/.

<template>
	<div  style="width: 200px; margin:100px auto;">
		<a-tooltip title="导出excel" :getPopupContainer="getPopupContainer">
			 <a-button type="primary">导出excel</a-button>
		</a-tooltip>
	</div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
		getPopupContainer(triggerNode){
			return triggerNode.parentNode;
		}
    }
  }
</script>
<style scoped>
	/* 提示框 */
    /deep/ .ant-tooltip-inner {
        background-color:red;
     }
	 /* 小箭头 */
	 /deep/ .ant-tooltip-arrow::before {
		background-color:red; 
	 }
</style>

注意：

最简单的办法是style里的scoped去掉，不需要设置getPopupContainer也不需要加/deep/，但是这样风险较大，会影响到其他页面的样式。

最终效果：