摘自：https://wolfx.cn/vue-scoped-css-questions/
例如（無效）：
<template>
<div id="app">
<el-input class="text-box" v-model="text"></el-input>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>
<style lang="less" scoped>
.text-box {
input {
width: 166px;
text-align: center;
}
}
</style>
複製程式碼解決方法:
使用深度作用選擇器 /deep/
<template>
<div id="app">
<el-input v-model="text" class="text-box"></el-input>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>
<style lang="less" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>
複製程式碼官方文件：vue-loader.vuejs.org/guide/scope…
我在使用elelment-ui 時踩的坑：