关于如何接收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

[github-actions[bot]]

👋 @panchaoco, Thanks for submitting your issue. We'll look into it and keep you updated on our progress. Let us know if you have any questions.

[akinoccc]

因为vue 组件必须显式定义props ，想要实现传递泛型定义props ，应该要额外的插件支持

[panchaoco]

因为vue 组件必须显式定义props ，想要实现传递泛型定义props ，应该要额外的插件支持

用函数组件，函数组件是可以不用显示的定义props的，如果不合适，可以考虑找一下相关的插件或者手写一个，啊哈哈😄

[akinoccc]

因为vue 组件必须显式定义props ，想要实现传递泛型定义props ，应该要额外的插件支持

用函数组件，函数组件是可以不用显示的定义props的，如果不合适，可以考虑找一下相关的插件或者手写一个，啊哈哈😄

目前正在调研和开发一个vite插件，就是最近比较忙，进度会稍慢一些🤣

[panchaoco]

因为vue 组件必须显式定义props ，想要实现传递泛型定义props ，应该要额外的插件支持

用函数组件，函数组件是可以不用显示的定义props的，如果不合适，可以考虑找一下相关的插件或者手写一个，啊哈哈😄

目前正在调研和开发一个vite插件，就是最近比较忙，进度会稍慢一些🤣

期待你的成果

[akinoccc]

想了个解决方案, 自定义属性全部通过 props 传递

<script setup lang="ts">
import { styled } from '@/index'

const TestProps = styled.div<{
  color: string
}>`
  color: ${(props) => props.color};
`
</script>

<template>
  <TestProps :props="{ color: 'red' }">tttttttt</TestProps>
</template>

[akinoccc]

想了个解决方案, 自定义属性全部通过 props 传递

<script setup lang="ts">
import { styled } from '@/index'

const TestProps = styled.div<{
  color: string
}>`
  color: ${(props) => props.color};
`
</script>

<template>
  <TestProps :props="{ color: 'red' }">tttttttt</TestProps>
</template>

Available from v1.7.0

[Zake95]

还有个问题，如果styled定义的组件是在一个循环中使用，最后一个组件传递的参数会覆盖前面所有的参数，导致样式都是一样的

[akinoccc]

还有个问题，如果styled定义的组件是在一个循环中使用，最后一个组件传递的参数会覆盖前面所有的参数，导致样式都是一样的

有示例吗，我没有复现你说的问题。这是我的测试代码

<script setup lang="ts">
const Test = styled('div', { color: String })`
  color: ${(props) => props.color};
`
const colors = ['red', 'blue', 'green']
</script>

<template>
  <Test v-for="c in colors" :color="c">
    {{ c }}
  </Test>
</template>

[akinoccc]

props插件快写好了，预计这两天发布。支持以下写法

const StyledDiv = styled.div<{ color: string }>`
  color: ${p => p.color};
`

type IconProps = {
  size: number
}

const StyledIcon = styled.span<IconProps>`
  font-size: ${p => p.size}px;
`

[akinoccc]

https://github.com/vue-styled-components/plugin

[akinoccc]

https://github.com/vue-styled-components/plugin

插件目前可用性比较差，挂起

[panchaoco]

还有问题，如果样式定义的组件是在一个循环中使用，最后一个传递的参数会覆盖前面所有的参数，导致样式都是一样的

有例子吗，我没有详细说明你说的问题。这是我的测试代码

你不应该这样做，不应该循环Test组件，你应该如下使用

<Test>
     <span v-for="c in colors">{{c}}</span>
</Test>