关于如何接收props的优化或者讨论

[panchaoco]

说明

假如我有以下的代码，这是一个vue3版本的tsx组件的写法，为了 能够将其props传递给styled，我按照了文档的语法模式进行了书写代码，但是这样会有几个问问题：

1. props的类型丢失，如果styled可以支持泛型的方式传入props类型就好了
2. 我的IconInnerLayout只能定义在函数组件内部，这样会导致一些通用的复杂的无法服复用

import { styled } from '@vvibe/vue-styled-components'
import type { FunctionalComponent, HTMLAttributes } from 'vue'

export const IconInner: FunctionalComponent<IconProps> = (props, ctx) => {
  const IconInnerLayout = styled('span', props as Record<string, any>)`
    display: flex;
    align-items: center;
    justify-content: center;
  `
  return <IconInnerLayout>{ctx.slots.default ? ctx.slots.default() : ''}</IconInnerLayout>
}

export interface IconProps extends HTMLAttributes {
  size?: number | string
  color?: string
}

期望可以实现如下功能

import { styled } from '@vvibe/vue-styled-components'
import type { FunctionalComponent, HTMLAttributes } from 'vue'
const IconInnerLayout = styled.span<IconProps>`
    display: flex;
    align-items: center;
    justify-content: center;
 
`
export const IconInner: FunctionalComponent<IconProps> = (props, ctx) => {
  
  return <IconInnerLayout {...props}>{ctx.slots.default ? ctx.slots.default() : ''}</IconInnerLayout>
}

export interface IconProps extends HTMLAttributes {
  size?: number | string
  color?: string
}

以上代码是将styled.span单独放了出去， 目前styled.[标签]的方式是可以支持泛型的，但是目前将styled相关代码放到组件之外，就无法接收props， 所以期望可以实现以上的改造，props在tsx组件中可以通过 {...props}的方式传入， 在vue3 模板语法组件中可以通过 v-bind的方式传入

总结一下就是： 把styled.span等其他方式定义的styled组件，支持接收传入props， 至于是tsx还是模板语法，那是vue内部的编译或者插件的实现

Additional context

No response