首页 > 其他分享 >style标签上添加scoped后父组件影响了子组件样式

style标签上添加scoped后父组件影响了子组件样式

时间:2022-11-17 16:48:00浏览次数:47  
标签:style 样式 标签 scoped 组件 后父

style标签上添加scoped之后,只会作用于当前组件,组件之间样式不相互影响,父子组件之间也不影响,但子组件根元素样式会受到父组件样式影响;
解决
Vue Loader里面有一句
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式

标签:style,样式,标签,scoped,组件,后父
From: https://www.cnblogs.com/redbean715/p/16899923.html

相关文章

  • ReactNote-函数组件和类组件
    组件:可以编写react元素虚拟DOM:react元素真实的DOM:可以展示React里很重要的:组件组件目的:复用组件作用:代码分隔组件在React里有两种定义的方式:第一种:......
  • 8.django-message组件
    message组件可以某次请求的某些数据暂存起来,当后面请求需要的时候可以再次使用,同时删除这些存起来的数据相对于cookie,message将数据存在server端,在需要使用的时候,再将数......
  • vue 使用ant design vue组件实现表格操作
    vue使用antdesignvue组件实现点击表格数据弹窗写在columns数组的对象里面customRender:(text,record,index)=>{if(index===this.list.length-1)......
  • Vue 中组件的使用
    一、局部组件的使用。渲染组件-父使用子组件。1、声子:创建子组件(对象)。//局部组件:声子挂子用子varVheader={template:`......
  • 问题记录-前端开发避坑(7)--vue 原生h5开发及基础组件开发
    问题1问题描述与分析执行vueRouter的编程式导航时,报错:vuerouterTypeError:onCompleteisnotafunction检查发现是参数格式不对。这里使用了对象语法,而我错把qu......
  • checkstyle
    目录是什么如何使用是什么和阿里代码规范一样的东西,默认为sun、google代码规范,可自己扩展,可自由选择。如何使用1:idea插件安装:2:找到公司的自定义代码规范文件:3:使用......
  • 12.Seata:Spring Cloud Alibaba分布式事务组件(非常详细)
    随着业务的不断发展,单体架构已经无法满足我们的需求,分布式微服务架构逐渐成为大型互联网平台的首选,但所有使用分布式微服务架构的应用都必须面临一个十分棘手的问题,那就是......
  • uniapp全局组件的使用
      第一步:在项目文件的根目录上添加一个components文件夹       我这里.配置的是全局的颜色 第二步:在需要用的组件上使用    注意:1.在使用全......
  • Vue3的setup在el-tab中动态加载组件
    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示数据内容大概是这样的在未使用setup......
  • 富文本组件 非Element Plus表单组件 自定义组件 触发表单校验
      项目中有很多自己封装的组件,如富文本组件,文件上传,图片上传等。而这些组件在表单中常常会在新增和编辑的场景应用。而且ElementPlus官网展示demo都是基于ElementPlu......