Vue:多组件样式冲突问题解决

一、场景描述

我们在开发Vue项目的时候,会有很多的组件,每个组件里,可能都会写相应的样式,这时候就会出现在父组件引入子组件的时候,同名样式会冲突的问题。从而导致样式出问题。

二、解决办法

style标签加上scoped属性即可

加上scoped之后,这个样式只会作用在当前组件的html模板上。

css 复制代码
<style scoped>
    .demo{
        background-color: orange;
    }
</style>
相关推荐
太阳伞下的阿呆38 分钟前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny1 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
飞翔的佩奇1 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的名城小区物业管理系统(附源码+数据库+毕业论文+开题报告+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·小区物业管理系统
chancygcx_1 小时前
前端框架Vue3(二)——Vue3核心语法之OptionsAPI与CompositionAPI与setup
vue.js·前端框架
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔2 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6142 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix