主题配置token中borderRadius与popover的问题

[muyeluoluo]

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

Version

4.2.3

Environment

vue3

Reproduction link

https://next.antdv.com/components/popover-cn

Steps to reproduce

a-config-provider组件的theme属性配置{token: {"borderRadius": 2}}
然后查看popover组件的圆角与arrow

What is expected?

期望统一一下borderRadius为2px还是数字2，渲染时，请修复为数字时后面缺失的px；或者为字符串时，其他属性的计算请修改一下

What is actually happening?

borderRadius配置为数字2后，以下样式的圆角缺失px ，:where(.css-dev-only-do-not-override-f0r9ql).ant-popover .ant-popover-inner{ border-radius: 2}；
borderRadius配置为字符串2px后，arrow会丢失，会呈现以下clip-path: polygon(NaNpx 100%, 50% NaNpx, NaNpx 100%, NaNpx 100%);

[cc-hearts]

borderRadius 统一为 number 的

[cc-hearts]

并没有复现你所说的问题，是否给一个最小复现代码呢？🤔

[muyeluoluo]

并没有复现你所说的问题，是否给一个最小复现代码呢？🤔

<a-config-provider :theme="{ token: { borderRadius: 2 } }"> <a-popover title="Title" trigger="click"> <template #content> <p>Content</p> <p>Content</p> </template> <a-button type="primary">点我</a-button> </a-popover> </a-config-provider>

[muyeluoluo]

[muyeluoluo]

刚刚注意到button也有这个问题，期望检查一下是否所有组件都有此问题

[kovsu]

popover

这样是正常的

'2px' 这种形式，会破坏 arrow 样式，需要修复

button

• number 的话，没有复现你这个问题
• string 的话，例如 '2'，就会出现你这个问题，但是 '2px' 这种形式也是支持的

Area.mp4

测试代码

<template>
  <a-config-provider
    :theme="{ token: { colorPrimary: data.colorPrimary, borderRadius: data.borderRadius } }"
  >
    {{ data }}
    <a-form :model="data" name="theme" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item name="colorPrimary" label="Primary Color">
        <input
          type="color"
          :value="data.colorPrimary"
          @input="e => (data.colorPrimary = e.target.value)"
        />
      </a-form-item>
      <a-form-item name="borderRadius" label="Border Radius">
        <a-input v-model:value="data.borderRadius" />
      </a-form-item>
      <a-form-item name="submit" :wrapper-col="{ offset: 4, span: 20 }">
        <a-popover title="Title" trigger="click">
          <template #content>
            <p>Content</p>
            <p>Content</p>
          </template>
          <a-button type="primary">点我</a-button>
        </a-popover>
      </a-form-item>
    </a-form>
  </a-config-provider>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { theme } from 'ant-design-vue';

const defaultData = {
  borderRadius: 6,
  colorPrimary: '#1677ff',
};
const data = reactive(defaultData);
const { token } = theme.useToken();
</script>

<style scoped>
input[type='color'] {
  border: 1px solid v-bind('token.colorBorder');
  background-color: v-bind('token.colorBgBase');
}
</style>

[kovsu]

@cc-hearts 可以提 PR 修一下 😀，要不要 assign 给你

[muyeluoluo]

@cc-hearts 可以提 PR 修一下 😀，要不要 assign 给你

奥奥。对，就是string的时候，arrow会丢失；number的时候圆角会因为没有px而不生效。
Thanks♪(･ω･)ﾉ。

[cc-hearts]

i can

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days