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

一、场景描述

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

二、解决办法

style标签加上scoped属性即可

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

css 复制代码
<style scoped>
    .demo{
        background-color: orange;
    }
</style>
相关推荐
黑臂麒麟几秒前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
wordbaby几秒前
Tanstack Router 文件命名速查表
前端
用户7227868123446 分钟前
Vue2中能否实现输入中文自动转化为拼音, 且不带音调
vue.js
1024肥宅8 分钟前
工程化工具类:模块化系统全解析与实践
前端·javascript·面试
软件技术NINI8 分钟前
如何学习前端
前端·学习
weixin_4225554210 分钟前
ezuikit-js官网使用示例
前端·javascript·vue·ezuikit-js
鱼鱼块13 分钟前
从零搭一个 Vue 小家:用 Vite + 路由轻松入门现代前端开发
vue.js·面试·前端框架
梓仁沐白20 分钟前
CSAPP-Attacklab
前端
郑州光合科技余经理36 分钟前
海外国际版同城服务系统开发:PHP技术栈
java·大数据·开发语言·前端·人工智能·架构·php
一行注释1 小时前
前端数据加密:保护用户数据的第一道防线
前端