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

一、场景描述

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

二、解决办法

style标签加上scoped属性即可

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

css 复制代码
<style scoped>
    .demo{
        background-color: orange;
    }
</style>
相关推荐
玖月晴空几秒前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰5 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js7 分钟前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
weixin79893765432...22 分钟前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
会一丢丢蝶泳的咻狗31 分钟前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花35 分钟前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_36 分钟前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
陈振wx:zchen20081 小时前
JavaScript
javascript·js
我是伪码农1 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜1 小时前
fetch-event-source源码解读
前端·javascript