vue引用第三方组件覆盖原有样式

问题

  通过全局样式或者去掉父组件中用scope方式声明样式,修改子组件样式不生效

解决方式

    1.引入的样式文件格式不正确,例如stylus、scss等,而不是统一以.css为后缀的文件
    2.在vue文件内样式域去掉scope, 在父组件style内修改样式,使用!important 提权,优先使用该样式

通常做法

  • 局部引入

    在各自vue文件中使用,互不干扰
    style标签里面的 关键字scoped【限位标记】
    添加这个关键字的作用:将这个style里面的样式都限制在该组件中,不会影响其他的组件。

  • 全局引入:
    作用于全局,让很多内容都使用这个样式,这个就要回到App.vue中
    (1)建立自己专门存放自定义样式的css文件
    (2)在App.vue中新建<style></style>
    (3)将css文件通过import ‘css文件位置’ 引入到style标签中,作为全局样式覆盖

猜你喜欢

转载自blog.csdn.net/qq_34147021/article/details/84641598