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

【问题标题】：Not able to style my otp component in vue无法在 vue 中设置我的 otp 组件的样式
【发布时间】：2020-12-16 01:49:09
【问题描述】：

我已经使用 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 应用到所有输入

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, 0, 0.3);
    text-align: center;
  }

</style>

【问题讨论】：

您在哪里注册了您的vue-otp-input 组件？
在 main.js import OtpInput from "@bachdgvn/vue-otp-input"; Vue.component("v-otp-input", OtpInput); @HardikShah

标签： css vue.js vue-component one-time-password

【解决方案1】：

你的样式是作用域的，v-otp-input 是一个 vue 组件，这意味着它不会受到影响。

您可以使用deep selector 来实现此目的。

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

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

【讨论】：