提供一个如何在自定义组件中使用框架皮肤的demo about ant-design-vue HOT 3 CLOSED

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>