前言:
在实际开发中不可避免的要使用一些组件库,但是里面的样式往往不是我们所需要的,和我们做的项目的主题所不匹配,那么我们就可以自己来主题定制,最常用的就是色彩主题定制和样式定制。
- 项目主题:选择适合项目的主题色彩,可以根据品牌色彩或项目设计风格来进行选择,确保组件库的颜色与项目整体一致。
- 样式定制:定制组件库的样式,包括按钮样式、输入框样式、边框样式等。可以通过修改 CSS 或使用样式覆盖机制,使组件库的样式与项目的整体风格一致。
实现:
CSS 主题定制
选择适合项目的主题色彩,可以根据品牌色彩或项目设计风格来进行选择。确保组件库的颜色与项目整体一致。
实现:
使用 CSS 变量定制项目主题,覆盖 vant 主题色,我们要做项目中创建一个styles/main.scss
:root {
// 问诊患者:色板
--cp-primary: #16c2a3;
--cp-plain: #eaf8f6;
--cp-orange: #fca21c;
--cp-text1: #121826;
--cp-text2: #3c3e42;
--cp-text3: #6f6f6f;
--cp-tag: #848484;
--cp-dark: #979797;
--cp-tip: #c3c3c5;
--cp-disable: #d9dbde;
--cp-line: #ededed;
--cp-bg: #f6f7f9;
--cp-price: #eb5757;
// 覆盖 Vant 主体色
// 官方文档:ConfigProvider 全局配置
--van-primary-color: var(--cp-primary);
}
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同。
在main.ts(这里我用的是ts创建的)引入此文件
<!-- 样式全局使用 -->
import 'vant/lib/index.css'
// main.scss一定要引入vant组件库样式的下面,在上面是不会生效的因为会被覆盖
import './styles/main.scss'
让我们看看效果,如图:
定制前
定制后
样式定制
定制组件库的样式,包括按钮样式、输入框样式、边框样式等。可以通过修改 CSS 或使用样式覆盖机制,使组件库的样式与项目的整体风格一致。
实现:
这里我们改变navBar的title字体样式
<template>
<van-nav-bar title="注册" left-arrow @click-left="onClickLeft" fixed right-text="注册" @click-right="onClickRight" />
</template>
<style lang="scss" scoped>
::v-deep() {
.van-nav-bar__title {
font-weight: normal;
}
}
</style>
拓展:
<<<
Vue2.x的深度作用选择器正式写法
- 仅适用于Vue2.x版本
- 支持css预加载器
/deep/
Vue2.x的深度作用选择器正式写法
- 仅适用于Vue2.x版本
- 支持css预加载器
**::v-deep() **
也可以::v-deep, 不过官方现在已经改了推荐用::v-deep()
Vue3.x的深度作用选择器正式写法
前后对比: