vue-vant样式无法覆盖/无法重写的问题,vant额外类名的使用
项目场景:以今天碰到的Field 输入框为例。问题描述:很明显,Field 输入框右边的input区域不对齐。不对齐怎么办,找到对应的样式,改样式呗。这里就是这个左侧title,带了一个flex:1样式的问题,手动给他取消看看这就没毛病了吧,对齐了,就是这个flex:1的问题但是在vue里直接class改样式没生效。不论是直接给van-field加class,用!important都改不掉,然后试
·
项目场景:
以今天碰到的Field 输入框为例。
问题描述:
很明显,Field 输入框右边的input区域不对齐。不对齐怎么办,找到对应的样式,改样式呗。
这里就是这个左侧title,带了一个flex:1样式的问题,手动给他取消看看
这就没毛病了吧,对齐了,就是这个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>
更多推荐
已为社区贡献3条内容
所有评论(0)