无法在vue中设置我的otp组件的样式

问题描述

我已经使用bachdgvn / vue-otp-input插入otp组件，但是无法对其设置样式。它不响应我在样式标签中所做的任何更改

我用https://www.vuescript.com/password-otp-input/作为参考

<template>
<div class="container">
    <p id="header">OTP</p>
    <p id="text">We have sent you a 4 digit verification code in the given mobile number.</p>
    <form @submit.prevent="handleSubmit" class="otp-container">
      
      <v-otp-input
        ref="otpInput1"
        inputClasses="otp-input"
        separator="-"
        :num-inputs="6"
        :should-auto-focus="true"
        input-type="number"
        @on-change="handleOnChange"
        @on-complete="handleOnComplete"
      />
    
    <button id="otp-submit" value="submit">Submit</button>
    </form>
</div>      
</template>

使用道具将样式应用于所有输入

props: {
   inputClasses: {
      type: String,}
}

最终使用样式标签

<style scoped>
.otp-input {
    position: absolute;
    width: 35px;
    height: 40px;
    padding: 5px;
    margin: 0 10px;
    font-size: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0,0.3);
    text-align: center;
  }

</style>

解决方法

您的样式已确定范围，并且v-otp-input是一个vue组件，这意味着它不会受到影响。

您可以使用deep selector来实现。

有多种方法可以在作用域样式标签中选择子组件：

<style scoped>
.a >>> .b { /* ... */ }
::v-deep .a { /* ... */}
.a /deep/ .b { /* should be deprecated by now */ }
</style>