vue css module 向子组件传递样式覆盖原有样式无效

Question

子组件

 <div :class="$style['login-btn']" @click="login">{{btnMsg}}</div>
  .login-btn {
    background-color: $m_pink;
    margin-top: 40px;
    height: 90px;
    line-height: 90px;
    opacity: .6;
    color: #000;
  }

现在想实现的 是父组件给子组件传递样式,如果不传递默认原有样式

直接绑定传递的是可以实现的,
 <div :class="btnStyle" @click="login">{{btnMsg}}</div>

  props: {
    btnStyle: {
      type: String
    }
  }

现在想实现的是 父组件不传递的时候,继续绑定原有组件样式,父组件传递的时候,覆盖掉原有的,但是这样写无效.
 <div :class="$style['login-btn'],btnStyle" @click="login">{{btnMsg}}</div>

我该怎么写呢?之前在props中写的

  props: {
    btnStyle: {
      type: String,
      default: this.$style['login-btn']
    }
  }

如果父组件传递,传递的正常,不传递,default为 undefine...
看了下文档

也就是在props中无法调用data等数据...这样我要怎么弄呢 ?

Answer 1

试试三目运算, 判断btnStyle有值class为btnStyle，否则是$style['login-btn']
类似下面这种

<div :class="btnStyle ？btnStyle : $style['login-btn']" @click="login">{{btnMsg}}</div>

Answer 2

btnStyle: {

  type: String,
  default: function () {
    return this.$style.loginBtn
  }
}