项目场景:

以今天碰到的Field 输入框为例。
vant样式无法覆盖/无法重写的问题解决,额外类名的使用

问题描述:

很明显,Field 输入框右边的input区域不对齐。不对齐怎么办,找到对应的样式,改样式呗。
vant样式无法覆盖/无法重写的问题,vant额外类名的使用
这里就是这个左侧title,带了一个flex:1样式的问题,手动给他取消看看

vant样式无法覆盖/无法重写的问题,vant额外类名的使用
这就没毛病了吧,对齐了,就是这个flex:1的问题

但是在vue里直接class改样式没生效。不论是直接给van-field加class,用!important都改不掉,然后试了试文档上的label-class左侧文本额外类名,也是不行,明明知道是哪个样式有问题,但是改不到它。

解决方案:

一般css都带scoped,避免影响其他页面或者组件,就是这个scoped影响了直接修改样式。但是这里不建议你把这个页面的style 里的scoped删掉。

<style lang="scss" scoped>

</style>

而是可以再加一个不带scoped的style来解决这个样式问题

<style lang="scss">
.van-cell__title {
	 flex: none;
}
</style>

建议使用下面这种方式,以免影响该组件在其他页面的样式

或者在里面使用文档上的label-class左侧文本额外类名都可以解决这个问题。

<style lang="scss">
.label_class {
	flex: none;
}
</style>
Logo

前往低代码交流专区

更多推荐