van-button去除边框，自定义样式

基本语法

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

自定义样式

注意不要给任何类型和参数

<van-button icon="add" class="add"><span class="btn-font">向他求助</span></van-button>
<style>
.add {
  top: 1.33333vw;
  font-size: 5.33333vw;
  position: relative;
  left: 31vw;
  border: none;
  color: #6ac2f6;
  background: white;
}
.btn-font {
  color: #4aa4c3;
  font-size: 16px;
  position: relative;
  top: -2px;
}
</style>

这样边框就消失了，样式就可以自定义了

改变组件自带的样式属性

就拿Vant中的Step步骤条为例

找到对应的样式，改变其中的样式

注意改变组件里面的样式必须得在类的前面加 /deep/ style里面也要添加，lang=‘scss’ scoped

<style lang='scss' scoped>
/deep/ .van-step__circle-container {
  .van-icon {
    font-size: 24px;
  }
  .van-step__circle {
    height: 20px;
    width: 20px;
  }
}
/deep/.van-step__title {
  margin-left: 0;
  -webkit-transform: none;
  transform: none;
  position: relative;
  top: 42px;
  font-size: 10px;
}
/deep/.van-steps--horizontal {
  padding: 6vw 2.66667vw 0;
  .van-steps__items {
    margin-bottom: 32px;
  }
  .van-step__circle-container {
    background: rgba(246, 246, 246, 1);
  }
}
/deep/ .van-steps {
  background: none;
}
</style>

小提示

如果想了解更多的Vant

最后

以上就是勤劳小刺猬为你收集整理的Vant van-button去除边框，自定义样式，改变组件自带的样式属性van-button去除边框，自定义样式的全部内容，希望文章能够帮你解决Vant van-button去除边框，自定义样式，改变组件自带的样式属性van-button去除边框，自定义样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。