vux Theme配置以及相关组件样式修改

上篇做了一个简单的vue中uvx的初次引用,使用时发现,样式修改通过css并不能达到效果,简单尝试之后分享一下笔记。
本文以button-tab为例:

 
        Today
        This Week
        This Month
 

所有组件的默认样式,都定义在他自身的主题色(theme.less)中,如果通过css,eg;

.vux-tab .vux-tab-item{
       color: blueviolet ;
        border-bottom:3px solid blueviolet;
    }
    // 上面这个把tab 里的文字都变成了blueviolet

这样是可以改变样式,但是属于样式覆盖,并不会出现状态切换。所以考虑从主题样式里修改,首先找到
vux Theme配置以及相关组件样式修改_第1张图片
依照上面格式,引入主题theme.less,如果你找不到该theme,就自己在src自己新建个**.less**文件。然后把ButtonTab里你所需要的样式复制过去,重新赋值定义:

//比如被选中框的颜色
@button-tab-active-background-color:#009FE8;

最后重启工程就好。
最终我自己所需的样式:
在这里插入图片描述

你可能感兴趣的:(Vue工程)