Skip to content

配置器

用来配置主题,样式覆盖,等全局的配置。

演示



样式覆盖
覆盖原始的样式, 允许多层嵌套
<script setup lang="ts">
import { ref } from 'vue'
const themeOverrides = ref({
  common: {},
  button: {
    color: 'red'
  }
})

const themeOverrides1 = ref({
  button: {
    color: 'orange'
  }
})

const themeOverrides2 = ref({
  button: {
    color: 'yellow'
  }
})
</script>
<template>
  <div>
    <div>
      <cl-config-provider :themeOverrides="themeOverrides">
        <cl-button size="small">Btn with color override</cl-button>
      </cl-config-provider>
    </div>
    <br />
    <div>
      <cl-config-provider :themeOverrides="themeOverrides1">
        <div>
          <cl-button size="small">Btn1 with color override</cl-button>
        </div>
        <br />
        <div>
          <cl-config-provider :themeOverrides="themeOverrides2">
            <cl-button>Btn2 with color override</cl-button>
          </cl-config-provider>
        </div>
      </cl-config-provider>
    </div>
  </div>
</template>

API

Config Provider Props

名称类型默认值描述
themeObjectlightTheme默认的Theme 主题,可以使用其他系统提供的theme主题类型
themeOverridesObject覆盖现有的主题内可以改变的部分