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. Nginx使用教程(一)：Nginx编译参数详解

    从源代码编译应用程序时通常有三个步骤:配置,编译和安装. 配置步骤允许您选择一些在程序编译后无法编辑的选项,因为它对程序二进制文件有直接影响. 因此,这是一个非常重要的阶段,你需要仔细选择,如果你想避 ...

  2. BSOJ 3899 -- 【CQOI2014】 数三角形

    Description 给定一个n*m的网格,请计算三个点都在格点上的三角形共有多少个.下图为4*4的网格上的一个三角形.  注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数 ...

  3. (12)Python异常

  4. Expires和Cache-Control的理解

    最近在学Nginx,学到有个地方式设置响应头信息,其中有两项是设置Expires和Cache-Control,来设置缓存时间,后来发现"并没有什么卵用",于是就搜了下资料,把整个思 ...

  5. ssh test

    本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 S ...

  6. ARM汇编语言基础

    ARM 与 Thumb 寄存器对应关系 PC寄存器: ARM状态为R15,Thumb状态为PC LR寄存器: ARM状态为R14,Thumb状态为LR SP寄存器: ARM状态为R13,Thumb状态 ...

  7. Android学习之基础知识四-Activity活动8讲（活动的灵活运用）

    一.判断当前是在哪个活动 1.我们还是接着上一讲的代码,首先创建一个Java类:BaseActivity.java.这个类我们不作为一个活动,也不在AndroidManifest.xml中注册,它只是 ...

  8. linux gcc nginx

    1.安装GCC[root@rekfan.com opt]# rpm -ivh cpp-4.1.2-48.el5.i386.rpm[root@rekfan.com opt]# rpm -ivh kern ...

  9. C#的delegate简单练习

    delegate中文的意思为委托. 在很久之前,Insus.NET有写过一篇<用一个简单的例子来演绎事件委托>http://www.cnblogs.com/insus/p/3732075. ...

  10. 在oj中Python的循环输入问题解决

    在oj中Python的循环输入问题解决 在makefile中定义逗号字符串和空格字符串 在linux服务器上面部署javaweb项目jar包 数据结构与算法之栈(Java与Python实现) 在oj中 ...