subcomponents

 <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: -sharp000;
  }

what you want to implement now is that the parent component passes the style to the child component, if you don"t pass the default original style

,
 <div :class="btnStyle" @click="login">{{btnMsg}}</div>

  props: {
    btnStyle: {
      type: String
    }
  }

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

how should I write it?

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

if the parent component passes normally and does not pass, default is undefine.
read the next document

that is, data such as data cannot be called in props. How can I do this?