提供一个如何在自定义组件中使用框架皮肤的demo

[horsecms]

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

What problem does this feature solve?

一部分情况下用户会自己创建组件，但是换肤功能无法使用，造成很多困扰，比如现在的单选框无法满足一些场景，我需要自己开发一个，在这种情况下无法使用框架主题

What does the proposed API look like?

antdv 4.1.2、 vue 3.4.21、chrome 122.0.6261.111

[selicens]

[wermdany]

封装

import { computed } from 'vue'
import { theme } from 'ant-design-vue'
import { css } from '@emotion/css'

import type { UnwrapRef } from 'vue'
import type { CSSInterpolation } from '@emotion/css'

export type ThemeToken = UnwrapRef<ReturnType<typeof theme.useToken>>['token']

export type GenCSSInterpolation = (token: ThemeToken) => CSSInterpolation | CSSInterpolation[]

export function useEmotionCss(genCss: GenCSSInterpolation) {
  const { token } = theme.useToken()

  return computed(() => css(genCss(token.value)))
}

应用

<script setup lang="ts">
import { useEmotionCss } from '@/hooks'

import { useSystemStore } from '@/store'

const system = useSystemStore()

defineOptions({
  name: 'Editer'
})

const css = useEmotionCss(token => ({
  color: token.colorText,
}))

const handleSwitchMode = () => {
  system.changeThemeMode(system.mode == 'dark' ? 'light' : 'dark')
}
</script>
<template>
  <div :class="css">
    <p>123131232</p>
    <button @click="handleSwitchMode">切换</button>
  </div>
</template>

[horsecms]

感谢各位

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.