在组件中需要使用本地样式,即scoped样式文件。在该文件中,父组件无法修改子组件的样式,选择器只能找到子组件的根类。可以使用深度选择器达到目的。
官网方法地址 : https://vue-loader.vuejs.org/zh/guide/scoped-css.html
其中深度作用选择器有三个连接符 : >>> 、/deep/和::v-deep。
如果样式文件是scss、sass等格式,需使用 /deep/。其他两个不生效。
实例:
<script>
<div class="content">
<Form ref="form" :model="form" :rules="rules" :label-width="80" label-position="left">
<FormItem label="账 户:" prop="username">
<Input type="text" size="large" v-model="form.username" placeholder="请输入用户名" :maxlength="10" autofocus="autofocus">
</Input>
</FormItem>
<FormItem label="密 码:" prop="pwd">
<Input type="password" size="large" v-model="form.pwd" placeholder="请输入密码">
</Input>
</FormItem>
<Button type="primary" @click="login" class="mybutton">登录</Button>
</Form>
</div>
</script>
<style lang="scss" scoped>
.ivu-form /deep/ .ivu-form-item-label {
color: white;
font-size: 18px;
}
.ivu-form /deep/ .ivu-input {
height: 42px;
width: 20vw;
}
.ivu-form /deep/ .ivu-btn {
height: 42px;
width: 100px;
}
</style>