vue中scss样式污染引发的思考

新做了一个项目,就是在登录后,就会产生左侧菜单的按钮颜色不一样。
在这里插入图片描述
然后发现样式是从这里传过来的
在这里插入图片描述然后发现是登录页面的css给污染了
在这里插入图片描述
就是加了scope就把这个问题解决了
在这里插入图片描述
然后想总结一下这个思路:就是如何排查污染样式,
如果出现了html元素定位错乱或者显示不正常, 而且觉得自己写的没有问题的情况下,我都是通过chrome的开发者工具,去看是什么导致的这个样式问题,然后看这个样式的来源去确定。

在这里插入图片描述

在这里插入图片描述
此可知,添加scoped属性的组件,为了达到不污染全局,做了如下处理

1.给HTML的DOM节点加一个不重复属性data-v-xxxx 标志唯一性;
2.在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局;
在这里插入图片描述

3.如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件(例如这里我使用了el-button,但是他只给外层的加了data-v-xxxx这个内容,里面的span并没有增加这个内容)
在这里插入图片描述
这样的问题就是不能修改子组件里面的样式内容了
解决方法:

1、不给style样式加scoped(这个不可能用,因为不能不加)
2、里面有个加scoped的style样式,再单独写了style标签,不加scoped的属性里面写修改的样式。(感觉也不太好)
3、::v-deep 加改动的样式 ;注意如果用scss的话 需改为 /deep/或者 >>>(感觉这个比较好)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

元素实现吸顶

1、position: sticky 直接设置元素需要吸顶的距离&#xff0c; <!-- App.vue --> <template><div id"app"><!-- <List:items"items":size"60":shownumber"10"/> --><div id"topHeight"&…

postman测试接口

1、postman测试接口 &#xff08;1&#xff09;首先安装postman 下载地址&#xff1a;Download Postman | Get Started for Free 选择对应版本下载&#xff0c;然后安装即可 &#xff08;2&#xff09;使用postman发送请求 比如以下这个请求例子&#xff1a; 使用postman发…

SpringBoot集成EasyExcel快速人们

目录 1.背景介绍 2.EasyExcel的使用 1.添加依赖 2.相关代码准备 1.实体类 2.ExcelUtil工具类 3.写入控制类 1.背景介绍 EasyExcel 是阿里巴巴开发的一款基于 Java 的专业化 Excel 操作工具&#xff0c;主要用于在 Java 应用程序中快速、高效地读写 Excel 文件。EasyExce…

Git 指令深入浅出【2】—— 分支管理

Git 指令深入浅出【2】—— 分支管理 分支管理1. 常用分支管理指令2. 合并分支合并冲突合并模式 3. 实战演习 分支管理 1. 常用分支管理指令 # 查看本地分支 git branch# 查看远程分支 git branch -r# 查看全部分支 git branch -aHEAD 指向的才是当前的工作分支 # 查看当前分…

开源的 Python 数据分析库Pandas 简介

阅读本文之前请参阅-----如何系统的自学python Pandas 是一个开源的 Python 数据分析库&#xff0c;它提供了高性能、易用的数据结构和数据分析工具。Pandas 特别适合处理表格数据&#xff0c;例如时间序列数据、异构数据等。以下是对 Pandas 的简明扼要的介绍&#xff0c;包括…

基于springboot实现旅游路线规划系统项目【项目源码+论文说明】

基于springboot实现旅游路线规划系统演示 摘要 随着互联网的飞速发展以及旅游产业的逐渐升温&#xff0c;越来越多人通过互联网获取更多的旅游信息&#xff0c;包括参考旅游文纪等内容。通过参考旅游博主推荐的旅游景点和规划线路&#xff0c;参考计划着自己的旅行&#xff0c…

【《高性能 MySQL》摘录】第 8 章 优化服务器设置

文章目录 8.1 MySQL 配置的工作原理8.1.1 语法、作用域和动态性8.1.2 设置变量的副作用8.1.3 入门8.1.4 通过基准测试迭代优化 8.2 什么不该做8.3 创建MySQL配置文件8.3.1 检查 MySQL 服务器状态变量 8.4 配置内存使用8.4.1 MySQL 可以使用多少内存8.4.2 每个连接需要的内存8.4…

STL常见容器(list容器)---C++

STL常见容器目录&#xff1a; 6.list容器6.1 list基本概念6.2 list构造函数6.3 list 赋值和交换6.4 list 大小操作6.5 list 插入和删除6.6 list 数据存取6.7 list 反转和排序6.8自定义排序案例 6.list容器 6.1 list基本概念 功能&#xff1a; 将数据进行链式存储&#xff1b; …

Flutter输入框换行后自适应高度

Flutter输入框换行后输入框高度随之增加 效果 设计思想 通过TextEditingController在build中监听输入框&#xff0c;输入内容后计算输入框高度然后自定义适合的值&#xff0c;并且改变外部容器高度达到自适应高度的目的 参考代码 //以下代码中的值只适用于案例&#xff0c;…

MyBatis 学习(一)之 MyBatis 概述

目录 1 MyBatis 介绍 2 MyBatis 的重要组件 3 MyBatis 执行流程 4 参考文档 1 MyBatis 介绍 MyBatis 是一个半自动化的 ORM &#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;持久层框架&#xff0c;它允许开发者通过 XML 或注解将对象与数据库中…

docker的简介--安装--操作命令

1.docker的简介 1.1docker是什么 用一句话来说docker就是一个新一代虚拟化技术 Docker是一种开源的平台&#xff0c;用于开发、交付和运行应用程序。它允许开发人员将应用程序和它们的依赖打包在一个容器中&#xff0c;然后部署到任何支持Docker的环境中。Docker的主要特点包括…

【React架构 - Scheduler中的MessageChannel】

前序 我们都知道JS代码是在浏览器5个进程(下面有介绍)中渲染进程中的Js引擎线程执行的&#xff0c;其他还有GUI渲染线程、定时器线程等&#xff0c;而页面的布局和绘制是在GUI线程中完成的&#xff0c;这些线程之间是互斥的&#xff0c;所以在执行Js的同时会阻塞页面的渲染绘制…

android应用开发基础知识,安卓面试2020

第一章&#xff1a;设计思想与代码质量优化 1、设计思想六大原则 2、三大设计模式 3、数据结构 4、算法 第二章&#xff1a;程序性能优化 1、启动速度和执行效率优化 2、布局检测与优化 3、内存优化 4、耗电优化 5、网络传输与数据存储优化 6、APK大小优化 7、屏幕适配 8、…

用Java语言创建的Spring Boot项目中,如何传递List集合呢?

前言&#xff1a; 在上篇文章中&#xff0c;用Java语言创建的Spring Boot项目中&#xff0c;如何传递数组呢&#xff1f;&#xff1f;-CSDN博客&#xff0c;我们了解到Spring Boot项目中如何传递数组&#xff0c;但是&#xff0c;对于同类型的List集合&#xff0c;我们又该如何…

高频更新使用sse好还是WebSocket

在实现高频更新的系统时&#xff0c;选择Server-Sent Events (SSE)还是WebSocket主要取决于应用的具体需求、数据传输的方向性、以及实现的复杂性。 一.Server-Sent Events (SSE) SSE是一种允许服务器向客户端发送更新的技术&#xff0c;但不允许客户端向服务器发送消息&…

Centos7:自动化配置vim | suoders信任列表添加普通用户

Centos7&#xff1a;自动化配置vim | suoders信任列表添加普通用户 vim 配置原理sudoers系统可信任列表中添加普通用户自动化配置vim vim 配置原理 在目录/etc下有一个vimrc文件&#xff0c;该文件是系统中公共的vim配置文件&#xff0c;对所有用户都成立。  而在每个普通用户…

【Kafka系列 06】Kafka Producer源码解析

温馨提示&#xff1a;本文基于 Kafka 2.3.1 版本。 一、Kafka Producer 原理图 生产者的 API 使用还是比较简单&#xff0c;创建一个 ProducerRecord 对象&#xff08;这个对象包含目标主题和要发送的内容&#xff0c;当然还可以指定键以及分区&#xff09;&#xff0c;然后调…

Git 分布式版本控制系统

Git是一个分布式版本控制系统&#xff0c;可以记录项目文件的变动并管理项目的不同版本。以下是Git的基本概念和使用方式&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git用仓库来存储项目文件。仓库可以是本地仓库&#xff0c;也可以是远程仓库&#xff0…

poi 设置允许西文在单词中间换行

说明本文是CSDN-问答模块,题主提问。问题描述:poi 设置允许西文在单词中间换行 一、问题描述 poi 设置允许西文在单词中间换行? // 创建一个新的文档XWPFDocument document = new XWPFDocument();// 创建段落XWPFParagraph firstParagraph = document.createParagraph();fir…

2022《OpenScene: 3D Scene Understanding with Open Vocabularies》阅读笔记2

A. Implementation Details 3D Distillation. 我们基于PyTorch实现。为了提取,我们使用Adam[26]作为优化器,初始学习率为1e−4,并训练100个epochs。对于MinkowskiNet,我们对ScanNet和Matterport3D实验使用2cm的体素大小,对nuScenes使用5cm的体素尺寸。对于室内数据集,我…