“<style scoped>”在Nuxt.js中的使用
“<style scoped>”在Nuxt.js中的使用
提问于 2017-06-16 14:47:09
我用nuxt.js / express开始这个项目。
我们已经为nuxt.js中的每个组件(nuxt.js)开发了样式范围。因此，在路由时，属性被覆盖在相同的类名(样式)上，因此页面无法正确显示。
1.“样式范围”的正确用法是什么？
或者路由过程应该是<a> <nuxt-link>**?**，而不是。
回答 1
Stack Overflow用户
发布于 2019-01-20 13:31:50
- “样式范围”的正确用法是什么？
表示法并不像scoped属性所建议的那样模棱两可，在此范围内定义的所有CSS元素仅适用于当前组件。如果CSS元素是全局存在的，则具有相同名称和类型的作用域-having优先，也就是说，它覆盖全局定义的CSS元素。
例如，让我们在/components文件夹3中定义Component1.vue、Component2.vue、Component3.vue：
Component1.vue
<template>
<div class="yellow-text">Component 1</div>
</template>
<script>
export default {
name: 'Component1'
}
</script>
<style>
.yellow-text {
color: yellow;
}
</style> Component2.vue:
<template>
<div class="yellow-text">Component 2</div>
</template>
<script>
export default {
name: 'Component2'
}
</script>
<style scoped>
.yellow-text {
color: red;
}
</style> Component3.vue:
<template>
<div class="yellow-text">Component 3</div>
</template>
<script>
export default {
name: 'Component3'
}
</script> - 在Component1.vue中，文本将以黄色显示。
- 在Component2.vue中，文本将以红色显示，因为作用域CSS类优先于Component1.vue中全局定义的类。
- 在Component3.vue中，文本将以黄色显示。
因此，要回答你的问题:没有正确的方法，因为只有一种方法可以做到这一点，而且意义不受任何形式的解释。
- 或者路由过程应该是而不是？
即使<nuxt-link />被呈现为<a href>，文档也明确指出必须使用前者来导航Nuxt.js应用程序，并且在将来，我们将向组件添加一些特性，比如在后台预取以提高Nuxt.js应用程序的响应性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44592158
复制相关文章
相似问题
腾讯云开发者
