How to customize CSS of input element in iView?

Question

I use Vue's single file components and wanted to try iView UI framework. Consider there is following piece of code:

<template>
  <div>
    <i-input class="cred"/>
  </div>
</template>

Then I want to change the width of my input. Just for example, to check that changes take effect:

<style scoped>
input {
  width: 10px;
}
</style>

But it has no effect. Tried i-input too.

<style scoped>
.cred {
  width: 10px;
}
</style>

Works as expected.
Which CSS selector should I use?

Answer 1

Vue/iView allows you to use the inline style attribute and pass it a width, or you can change the .ivu-input-wrapper CSS class and give it the with you want.

Vue.use(iview);
new Vue({
  data() {
    return {
      value: ''
    }
  }
}).$mount('#app')

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}

.ivu-input-wrapper {
  width: 400px;
}

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <i-input v-model="value" placeholder="CSS changed..."></i-input>
  <i-input v-model="value" placeholder="Inline style changed..." style="width: 200px"></i-input>
</div>