It is invalid for vue css module to overwrite the original style to the child component.

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?

written earlier in props

  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?

Vue.js css-moudle

Oct.03,2021

btnStyle: {

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

try trinomial operation to determine that btnStyle has a value class is btnStyle, otherwise it is $style ['login-btn']
similar to the following

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

Previous: Php several different array to calculate a different size and add up?

Next: How to solve the problem that input placeholder is not absolutely vertically centered in the safari browser?