美文网首页vue
vue修改样式不成功

vue修改样式不成功

作者: 凌晨丶杨先森灬 | 来源:发表于2019-10-11 15:41 被阅读0次
  1. style 中 scoped 会使 修改的样式 不成功
<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
   .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>

在这里插入图片描述

2.如果去掉 scoped 会使 修改的样式成功,但是也会导致其他页面的样式变化

在这里插入图片描述

3.使用 /deep/ 完美解决

<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
 /deep/  .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>
在这里插入图片描述

相关文章

  • vue修改样式不成功

    style 中 scoped 会使 修改的样式 不成功 2.如果去掉 scoped 会使 修改的样式成功,但是也...

  • vue-lazyload

    yarn add vue-lazyload main.js XXX.vue 各种样式修改

  • elementui el-popover组件样式调整

    如果你是Vue框架,那修改这个组件样式要在根目录下,如下图 要不然样式修改无效 修改后背景

  • 修改Element控件的样式

    我们在vue中使用Element库的时候,vue组件中样式的scoped会导致我们无法修改控件的样式。 解决方法是...

  • vue:样式穿透

    一、什么叫 vue 样式穿透 在 vue 开发过程中,可能会遇到修改 iview UI 组件样式的时候,无效的问题...

  • iView侧边栏(Sider)宽度修改

    想要修改Sider宽度,却发现在vue的style中设置并不成功。研究过后发现,不成功的原因有下面几点: ...

  • react antd修改主题色

    出错原因:按照antd官网,修改主题色,本地使用css-module 类名重新编译,导致样式修改不成功。 依赖包及...

  • 修改element样式问题

    在开发中发现了修改elementUI样式的时候,添加了scoped的组件无法修改的样式首先我们要了解一下vue s...

  • knowledge point

    elementUI默认样式修改不成功的问题 jQuery分页 Git更新远程仓库代码到本地 git fetch v...

  • H5 暗色模式的适配方案

    网页语言:vue代码示例:vue+iOSWKwebview H5的暗色模式都是基于CSS样式的修改来适配web内容...

网友评论

    本文标题:vue修改样式不成功

    本文链接:https://www.haomeiwen.com/subject/edtxmctx.html