修改vue项目中组件中引入的子组件或第三方插件或库的样式

方法一：使用/deep/

<template>
  <div class="box">
    <toast title="弹窗">...</toast>
  </div>
</template>
<script>
  import {Toast} from '../toast/toast'
  export default {
    name: 'box',
    data () {
      return {}
    },
    components: {
      Tosat
    },
  }
</script>
<style scoped>
  /*
  修改样式，通过使用box的class类，找到下面组件内的class类，
  中间必须得使用 /deep/ 才能找到下面的class类。
  */
  .box /deep/ .xxx组件中样式类{
    color: red;
  }
</style>

方法二：使用 >>>

使用者三个大于号就可以找到，跟上面的 /deep/ 差不多

<template>
  <div class="box">
    <toast title="弹窗">...</toast>
  </div>
</template>
<script>
  import {Toast} from '../toast/toast'
  export default {
    name: 'box',
    data () {
      return {}
    },
    components: {
      Tosat
    },
  }
</script>
<style scoped>
  /*
  修改样式，通过使用box的class类，找到下面组件内的class类，
  中间必须得使用 >>> 才能找到下面的class类。
  */
  .box >>> .xxx组件中样式类{
    color: red;
  }
</style>

方法三：使用全局样式表（不推荐）

<!-- 情况下，引入全局得样式，或者是直接在 app.vue 文件中写全局得。下面是在全局得app.vue中写 -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}

</script>

<style>
/* 上面没加 scoped 属性，所以全局样式 */ 
.box-out .xxxxx组件样式类 {
    color: red;
  }
</style>