antd a-tooltip修改背景颜色及箭头小三角形颜色，自定义背景颜色

uoz98

已于 2022-05-13 14:43:28 修改

阅读量4.2k

点赞数 6

文章标签： javascript css 前端 html5 vue.js

于 2022-05-13 14:08:59 首次发布

本文链接：https://blog.csdn.net/weixin_52625246/article/details/124750524

版权

如何修改antd a-tooltip的原有背景颜色

原本黑底白字

修改后为白色黑字

在使用的组件方法上添加类名ovelayClassName="你自己定义的类名"，在style内写上要修改的背景颜色，注意style不能加scoped，加了无效！！

.tooltipColor {
  .ant-tooltip-inner {
    // 这里是框框
    color: #333;
    background-color: #fff !important;
  }

  // 这个写法不生效
  // .ant-tooltip-arrow::before {
  //   // 这里是小三角
  //   background-color: #fff !important;
  // }

  .ant-tooltip-arrow-content {
    background-color: #fff !important;
  }
}