antdv 中 a-popover 气泡卡片样式修改不生效或者覆盖的问题

<style lang="less" scoped>
//样式写在这里发现不生效

.ant-popover-inner{

color:pink;

}
</style>

如果去掉scoped,会污染全局样式,影响其他popover的样式,

解决:给a-popover标签加上一个类名overlayClassName,然后样式在.poperLayTable里面写,这样,即使去掉scoped后也不影响其他popover

   <tr v-for="item in list">  
            <td>
             <a-popover placement="leftTop" style="width:300px; height:300px;"
             overlayClassName="poperLayTable"
             >
                <template slot="content">
                  <div class="xiangqing">
                    <h4>详情</h4>
                    <p>标题:<span>{ { item.title }}</span></p>
                    <p>内容:<span>{ { item.content}}</span></p>       
                  </div>
                </template>
                <p>{ { item.title }} </p>
                <p>{ { item.name}}</p>
              </a-popover>
            </td>       
          </tr>   

<style lang="less">
//样式写在这里发现不生效

.poperLayTable{

        .ant-popover-inner{

                color:pink;

        }

}
</style>

猜你喜欢

转载自blog.csdn.net/qq_38687592/article/details/128442464