配置器
用来配置主题,样式覆盖,等全局的配置。
演示
样式覆盖
覆盖原始的样式, 允许多层嵌套
<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
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
theme | Object | lightTheme | 默认的Theme 主题,可以使用其他系统提供的theme主题类型 |
themeOverrides | Object | 覆盖现有的主题内可以改变的部分 |