a-style-provider 在 ^4.0.0-rc.5 中显示弃用 那我该怎么进行取消:where

[MitchellRyrie-evanBuck]

• 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?

Chrome 已是最新版本
版本 114.0.5735.198（正式版本） (arm64)
Vue: 3.3.4
macOS Ventura 13.5 Beta版

[CCherry07]

参考: https://next.antdv.com/docs/vue/compatible-style-cn

[MitchellRyrie-evanBuck]

参考：https://next.antdv.com/docs/vue/known-style-cn

[CCherry07]

是否是正常工作的呢？

[MitchellRyrie-evanBuck]

是否是正常工作的呢？

没有生效 样式还都是附带:where 没有正常工作

[li88qq]

<template>
  <a-config-provider :theme="themeRt">
    <RouterView>
      <a-card>
        <a-space>
          <a-button type="primary" @click="changeTheme">变换主题</a-button>
          <a-button type="primary" @click="changeColorPrimary">变换主题色</a-button>
        </a-space>
      </a-card>
    </RouterView>
  </a-config-provider>

</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import {theme} from 'ant-design-vue'

const {defaultAlgorithm, darkAlgorithm} = theme

//主题色
const colors = ['#1677ff','#5A54F9', '#9E339F', '#ED4192', '#E0282E', '#F4801A', '#F2BD27', '#00B96B']

//颜色索引
const indexRef = ref(0)
//暗黑主题
const darkRef = ref(false)

const themeRt = reactive({
  algorithm: defaultAlgorithm,
  token: {
    colorPrimary: colors[indexRef.value]
  }
})

//切换主题
const changeTheme = () => {
  darkRef.value = !darkRef.value
  if (darkRef.value) {
    themeRt.algorithm = darkAlgorithm
  } else {
    themeRt.algorithm = defaultAlgorithm
  }
}

//切换主题色
const changeColorPrimary = () => {
  indexRef.value++
  const colorIndex = indexRef.value % colors.length;
  themeRt.token.colorPrimary = colors[colorIndex]
}

</script>

[CCherry07]

hash-priority设置之后，需要刷新才会生效
你看看这个demo

[MitchellRyrie-evanBuck]

我不知道你给的这个demo 为啥会没有那个提示
我现在项目的场景是这样的 我需要使用穿透(例子) :deep(.ant-menu-item) 单独修改几个menu的样式
所以就我上述提的问题 在我的项目中 使用a-style-provider 一直是会报以下错误

并且 我去问过chatGPT 以下问题

我提供一下 我项目中所涉及到的依赖

看看是什么问题导致 或者说是 这个组件就是在4版本中 暂时被弃用了 我最终的原意是想使用 deep 穿透 单独去修改几个样式 但就是因为 :where 降权不了 我暂时改不了

[aibayanyu20]

你是不是按需加载的组件库，如果是按需加载目前使用unplugin-vue-components中的resolver还不支持styleProvider可以使用手动注册的方式
[main.ts]

import { StyleProvider } from "ant-design-vue"
// ...
app.use(StyleProvider)

或者使用antdv-component-resolver

[MitchellRyrie-evanBuck]

你是不是按需加载的组件库，如果是按需加载目前使用unplugin-vue-components中的resolver还不支持styleProvider可以使用手动注册的方式 [main.ts]

import { StyleProvider } from "ant-design-vue"
// ...
app.use(StyleProvider)

或者使用antdv-component-resolver

感谢🙏

[UphkcRNqmafQWcSSSSSS]

<template>
  <AStyleProvider hash-priority="high">
    <AConfigProvider>
      <Application>
        <RouterView />
      </Application>
    </AConfigProvider>
  </AStyleProvider>
</template>

<script setup lang="ts">
  import {StyleProvider as AStyleProvider} from 'ant-design-vue'
</script>

[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.