ConfigProvider

全局配置化组件

主题覆盖

透过ConfigProvider我们可以轻松控制内部的所有子组件

你可以通过themeOverrides这个属性覆盖hover状态下的主题色,被该组件包裹的组件都会自动继承该属性内的css变量

部分组件不选择继承使用

当然你也可以让部分组件选择不使用继承的主题配置比如button组件那么你可以让themeOverride设置为null 或者传入一份独特属于该button的样式变量

show me the code

<template>
  <p-config-provider :theme-overrides="themeOverrides">
    <layout>
      <p-button type="primary">
        主题色覆盖
      </p-button>
      <p-button class="ml-[10px]" type="primary" :theme-override="null">
        我就是要用最初的主题色
      </p-button>
    </layout>
  </p-config-provider>
</template>

<script setup lang='ts'>
import { reactive } from 'vue'

const themeOverrides = reactive({
  CommonCssVars: {
    '--primary-color': 'red',
    '--primary-color-hover': 'green',
    '--primary-color-hover-pressed': 'blue'
  }
})

</script>
<style scoped>
</style>

ConfigProvider #

全局配置化组件 #

主题覆盖 #

ConfigProvider

全局配置化组件

主题覆盖