技術標籤：vuejscsselementui

學校大作業，我負責的前端部分，正好前段時間學習了vue和elementUI，就來實踐一下，部分程式碼如下：

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

後來我發現在el-input舔加樣式使文字居中但並沒有生效

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

<style scoped>
......
.ip{
    text-align:center
}
......
<style>
 

在瀏覽器裡渲染成這樣

可以看到渲染的時候在input外套了個div元素，我加在el-input的ip這個class也是在這個div元素上，input元素則是el-input__inner這個class

div為父元件，input為子元件,vue裡可以看到<style scoped>,由於scoped的存在父元件的樣式無法傳遞到子元件

而以上可以看到我們的原本加在el-input的名為ip的class渲染到了父元件div上，這也就是為什麼新增樣式無法生效的原因

所以修改程式碼如下（可以將/deep/換成>>>）

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

<style scoped>
......
.ip /deep/ .el-input__inner{
    
}
......
<style>
 

重新執行樣式就生效了