如何在 vue js 中改变 ant 设计的风格答案

【问题标题】：How to change style of ant design in vue js如何在 vue js 中改变 ant 设计的风格
【发布时间】：2020-12-06 09:22:51
【问题描述】：

我无法在 nuxtjs 上更改 ant-tooltip 的样式。我访问了 ant-tooltip-inner 类，但它没有改变。

<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-design 样式需要一些配置工作。你通常不应该为它使用 ant-design 类名。如果你使用 babel 和 Webpack，我会在这篇博文中介绍：medium.com/@syllaband/…

标签： javascript vue.js nuxt.js antd

【解决方案1】：

在 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>

查看工作CodeSandBox。

【讨论】：