popover样式覆盖

[jingping-ye]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

我想要覆盖popover的样式，比如背景颜色，内边距，使用v::deep和!important去控制，但是没有效果。如下:

<style lang="scss">
::v-deep .ant-popover-inner-content {
padding: 0 !important;
background-color: red !important;
}
</style>

使用ant-design-vue版本:1.7.2

What does the proposed API look like?

希望可以实现样式覆盖

[John60676]

reference: https://codesandbox.io/s/vue-antd-template-forked-jnvlb?file=/src/App.vue

[jingping-ye]

我觉得这个有点坑爹。
如果组件中有若干popover，我只要改造其中一两个，这样写对其他也会造成影响。但是一旦我加上父级class限制，popover的样式立马失效。比如:

<template>
  <div class="test-com">
    <a-popover title="Title" trigger="click">
      <template slot="content">
        <p>Content</p>
        <p>Content</p>
      </template>
      <a-button type="primary"> Click me </a-button>
    </a-popover>
  </div>
</template>

<style lang="scss">
.test-com .ant-popover-inner-content {
  background-color: red;
}
</style>

另外，如果没有加scoped限制，这样做会影响到其他组件的popover样式。

[John60676]

@jingping-ye 自行通过 overlayClassName 添加类名以限制修改的范围

[pgy108103]

@jingping-ye 可以將content載入component就不會污染其他的popover

<template>
  <div class="test-com">
    <a-popover title="Title" trigger="click">
      <template slot="content">
        <Content></Content>
      </template>
      <a-button type="primary"> Click me </a-button>
    </a-popover>
  </div>
</template>

<script setup>
import Content from 'xxx.vue'
</script>

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.