Javascript 如何在vue js中改变ant设计风格

我无法更改nuxtjs上ant工具提示中的样式。我可以访问类ant工具提示内部，但它不会更改

<div class="box-form-input">
     <a-tooltip placement="topRight" trigger="focus">
         <template slot="title">
             <span>Please fill in your Fullname</span>
         </template>
         <a-input
             v-model="full_name"
      
         />
     </a-tooltip>
</div>
<style>
    .ant-tooltip-inner {
        background-color: red;
    }
</style>

请填写您的全名
.ant工具提示内部{
背景色：红色；
}

在

vue.js

中重写Antd工具提示的效果与预期一致

<template>
  <div id="app">
    <!-- remove h3 tag causes wrong arrow direction -->
    <h3>try to remove this element.
      <br>After removed, the tooltip arrow changed direction.
    </h3>
    <a-tooltip placement="left" title="wrong arrow direction">
      <span>why don't use popper.js</span>
    </a-tooltip>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
.ant-tooltip-inner {
  background-color: red;
}
</style>

尝试删除此元素。

删除后，工具提示箭头更改了方向。
.
覆盖本机ant设计样式需要一些配置工作。您通常不应该为它使用ant设计类名。如果你使用babel和Webpack，我会在这篇博文中介绍：