vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全局的样式。

但是存在一个问题组件框架的ui样式没办法覆盖。

解决办法:在vue 文件里面写两个style 样式

例如

<style>

  ///全局的

//全局的这个一定要在要覆盖的ui样式之前,在包裹上一层,这样就不会影响别的组件的样式

</style>

<style scoped>

//私有的

</style>

全局和私有的style 的顺序一定不能变,全局的在最前面,私有的在后面

vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法的更多相关文章

  1. 如何手动解析vue单文件并预览?

    开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  4. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  5. VUE2 第六天学习--- vue单文件项目构建

    阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...

  6. vue单文件中引用路径的处理

    原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...

  7. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  8. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  9. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

随机推荐

  1. spring4整合xfire1.2.6的问题解决

    历史原因,需要用xfire发布webservice,项目用了spring4,整合几个坑,记录下(其他的配置忽略,相关资料比较多): 1. xfire定义bean的时候,用了 singleton 属性, ...

  2. DP E - Cheapest Palindrome

    Keeping track of all the cows can be a tricky task so Farmer John has installed a system to automate ...

  3. 装饰者模式vs适配器模式

    http://www.cnblogs.com/tekkaman/p/3275077.html 1.关于新职责:适配器也可以在转换时增加新的职责,但主要目的不在此.装饰者模式主要是给被装饰者增加新职责的 ...

  4. Click to add to Favorites Troubleshooting: High Version Count Issues (Doc ID 296377.1)

    Copyright (c) 2018, Oracle. All rights reserved. Oracle Confidential. Click to add to Favorites Trou ...

  5. QT中子目录调用另一个子目录

    解决办法: 第一:建立一个subdirs项目,子项目管理 第二:添加二个子项目例如:A子项目   B子项目 第三:现在A子项目调用 B子项目 在A子项目中:右键>添加库>内部库(把A添加进 ...

  6. B-Tree外存数据结构 _(外存储器—磁盘)第一部分

    1.外存储器—磁盘 计算机存储设备一般分为两种:内存储器(main memory)和外存储器(external memory).内存存取速度快,但容量小,价格昂贵,而且不能长期保存数据(在不通电情况下 ...

  7. Ubuntu触摸屏校准

    我是在ubuntu系统中使用触摸屏,我的是两块屏幕一个是触摸屏幕一个是普通的屏幕,触摸屏使用需要校准,所以要直接入一个触摸屏,或者两个屏幕是复制的关系,不能是扩展. 1.安装已下的两个软件,有可能第一 ...

  8. java 面向对象基本知识

    1.继承 使用extends实现继承 只有单继承 子类继承父类,可以得到父类的全部属性和方法 (除了父类的构造方法),但不见得可以直接访问(比如,父类私有的属性和方法).  instanceof是二元 ...

  9. Linux命令——df/du/time

    一.df(disk free) df命令可以用来检查 linux服务器的文件系统的磁盘空间占用情况,可以知道硬盘被占用了多少空间,目前还剩下多少空间等信息. 1)命令格式 df [参数] 文件名 2) ...

  10. 《Google软件测试之道》测试开发工程师

    拖延了将近半年的草稿,断断续续的写完了.之前草草翻看完这本书,关注点主要在TE上,而关于SET的部分则只是浏览,最近后知后觉,又翻出了这本书,重新看了一遍,又有新收获. 就说说Google的SET是如 ...