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

一、场景描述

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

二、解决办法

style标签加上scoped属性即可

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

css 复制代码
<style scoped>
    .demo{
        background-color: orange;
    }
</style>
相关推荐
再吃一根胡萝卜18 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤19 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly2119 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐19 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖19 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
武昌库里写JAVA19 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温19 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯19 小时前
日常小常识记录
前端
那一抹阳光多灿烂19 小时前
CSS 编码规范
前端·css
degree52019 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3