Closed
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
4.2.6
Environment
Windows 11,Google Chrome,"vue": "^3.4.29",
Reproduction link
Steps to reproduce
<template>
<a-config-provider
:theme="{ token: { borderRadius: `${data.borderRadius}px` } }"
>
<a-form :model="data" name="theme">
<a-form-item name="borderRadius" label="Border Radius">
<a-input v-model:value="data.borderRadius" />
</a-form-item>
</a-form>
<P>a-tooltip arrow has style error</P>
<a-tooltip
title="<< arrow style error"
placement="right"
:arrow="{ pointAtCenter: true }"
>
<a-button type="primary">Move the mouse here</a-button>
</a-tooltip>
</a-config-provider>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { theme } from "ant-design-vue";
const defaultData = {
borderRadius: 6,
};
const data = ref(defaultData);
const { token } = theme.useToken();
</script>
<style scoped></style>
What is expected?
可以在设置后真确显示箭头
What is actually happening?
使用a-config-provider 设置 属性theme.token.borderRadius后,在里面使用的a-tooltip组件会出现箭头样式问题,箭头变为了一个矩形
Metadata
Metadata
Assignees
Labels
No labels