使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效完美解决避免污染全局样式

使用前端UI框架时在页面上单独修改css 但是不生效都是在 <style scoped> </style>这样的模式下修改依然不生效后来尝试了几种方法找到了一种最有效的方式

修改前 css不生效主要是想把 tab 修改为主题色黄色但是他现在用的是本身ui框架统一的黑色皮肤

 /* 修改tab切换原生的样式 */.gui-segmented-control{background-color:#F8F8F8;padding:0rpx;} /* 外层主体 */.gui-segmented-control-item{color:#999999; font-size:12px; line-height:30px;} /* 项目标题 */.gui-segmented-current{background-color:#FFD524; color:#000000;line-height: 30px;} /* 激活样式 */

加上 /deep/ 后生效

 /* 修改tab切换原生的样式 *//deep/.gui-segmented-control{background-color:#F8F8F8;padding:0rpx;} /* 外层主体 *//deep/.gui-segmented-control-item{color:#999999; font-size:12px; line-height:30px;} /* 项目标题 *//deep/.gui-segmented-current{background-color:#FFD524; color:#000000;line-height: 30px;} /* 激活样式 */

/deep/ 的主要用法

/deep/的意思大概为深入的，深远的。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式相关推荐

css安卓手机位置偏差,完美解决移动端使用rem单位时CSSSprites错位问题_html/css_WEB-ITnose...
移动端网页开发离不开强大的 rem 支持,但由于各尺寸基数未必成比例,以及浏览器的计算偏差,常常会导致 background-position 不够精确,引发 CSS Sprites 错位.下图左侧为 ...
html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了（中文问题，换行问题，分页，页眉页脚，水印）,html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...
Debug下正常运行，但调成Release时遇到三个问题及其完美解决！
---------------------------------------------------------------------------------------------------- ...
hbase 启动时 Name or service not known -完美解决
异常描述:Name or service not known 解决方式 [root@Hades_kk bin]# vim /etc/hosts 在127.0.0.1 最后加上服务器hostname 即 ...
FileZilla Server 搭建FTP服务器时出现的报错（完美解决）
报错内容(无法生成证书导致的) filezilla server Could not load certificate file: error:02001002:system library:fope ...
带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言在我们前端的开发中经常会使用到各种 ui 框架下面这两个是比较火的,也是我常用的两个ui框架. 问题描述但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
Touch UI：高质量的移动端UI框架介绍
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
Android开源库V - Layout：淘宝、天猫都在用的UI框架，赶紧用起来吧！
前言 V- Layout 是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局,在手机天猫 Android版内广泛使用让人激动的是,在上个月V- Layout终于在Github上开源! Git ...

使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效完美解决避免污染全局样式

使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式相关推荐

最新文章

热门文章

使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效 完美解决避免污染全局样式

使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式相关推荐

最新文章

热门文章

使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效完美解决避免污染全局样式

使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式相关推荐