css - 混合本地和全局样式在 Vuejs 中不起作用
问题描述
我在同一个组件 Login.vue 中同时包含了作用域和非作用域样式。问题是当我在样式中应用范围属性时,样式不适用。但是,当我从样式中删除 scoped 属性时,样式会应用,但它也适用于 App.vue。
我也尝试在 App.vue 中包含范围和非范围样式。
这是我在 Login.vue 中的代码:
<style>
.....
</style>
<style scoped>
.application.theme--light {
background: #242348;
}
</style>
Login.vue 的代码:
<template>
<v-app id="inspire" style="background: #242348; height: 151vh" >
<v-container>
<v-layout row wrap>
<v-flex xs12 md6>
<div id="text">
<p>Welcome! Admin</p>
<p id="textline">Let's get you logged in!</p>
</div>
</v-flex>
<v-flex xs12 md6>
<v-card id="card">
<v-tabs id="tabs" grow>
<v-tabs-slider color="purple darken-3"></v-tabs-slider>
<v-tab
v-for="(item, index) in items"
@click="currenttab = index"
:key="item"
> {{ item }}</v-tab>
</v-tabs>
<v-divider></v-divider>
<v-form ref="form" lazy-validation browser-autocomplete="off">
<v-card-text class="box">
<v-container>
<v-flex >
<v-text-field
label="Username"
outline
v-model="email"
required
:rules="emailError"
value="email"
></v-text-field>
</v-flex>
<v-flex >
<v-text-field
id="password"
label="Password"
:type="show ? 'text' : 'password'"
:append-icon="show ? 'visibility' : 'visibility_off'"
@click:append="show = !show"
outline
v-model="password"
required
:rules="passwordError"
></v-text-field>
</v-flex>
<v-card-actions>
<v-btn
class="button"
color="#4A68C0" round dark
@click="validate(email, password)"
>Sign In</v-btn>
</v-card-actions>
</v-container>
</v-card-text>
</v-form>
<v-card-text id="cardtxt" class="text-xs-center">Problem Signing In?</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
这是我的 App.vue
<template>
<v-app id="inspire">
<div id="app">
<div class="clearfix hidden-xs-only" style="width:100%">
<app-header v-if="toshow"></app-header>
<div style="float: left;" v-if="toshow">
<app-nav></app-nav>
</div>
<div style="float: left;" v-if="toshow" >
<router-view />
</div>
<div style="clear:both"></div>
<app-footer v-if="toshow"></app-footer>
<router-view v-if="!toshow" class="animated slideInLeft" style="animation-duration: 0.3s; animation-timing-function: ease-out;" />
</div>
</div>
</v-app>
</template>
我希望背景颜色仅应用于 Login.vue 而不是任何其他 .vue 文件。但实际上我得到了这个:当我从样式中删除 scoped 属性时,背景颜色将同时应用于 Login.vue 和 App.vue
解决方案
推荐阅读
- python - 运行 python 脚本的 Firebase Cloud Functions - 需要依赖项
- bash - 需要关于 shell 中的变量替换的帮助
- mysql - 现代流行的关系数据库会始终确保数据表具有聚集索引吗?
- sas - procsurveyreg 中的对比声明
- php - 未定义的偏移量:1 laravel 6
- javascript - 同源提取导致空比较(HTTP CORS)
- reactjs - {响应:“False”,错误:“IMDb ID 不正确。”}
- python - 导入谷歌云视频智能时出错:ImportError: cannot import name 'init_grpc_aio' from 'grpc._cython.cygrpc'
- javascript - 如何在电子中启用语音识别?
- python - ValueError:检查输入时出错:预期的dense_input具有形状(213,)但得到的数组具有形状(210,)