vue 学习之框架或插件组件样式更改

修改组件样式三种方式

以下例子以 vux 来弄

第一种：使用 /deep

推荐的。看下面例子

<template>
  <div class="box-out">
   <step v-model="step1" background-color='#fbf9fe'>
        <step-item title="步骤一" description="step 1"></step-item>
        <step-item title="步骤二" description="step 2"></step-item>
        <step-item title="步骤三" description="step 3"></step-item>
    </step>
  </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
  name: 'box',
  data () {
    return {
       step1: 1,
      step2: 0
    }
  },components: {
      Step,
      StepItem,
      XButton,
      XHr
  }
}
</script>

<style scoped>
  /*
  修改样式
  通过使用 box-out 的class类，找到下面组件内的class类，中间必须得使用 /deep/ 才能找到下面的class类。
  */
  .box-out /deep/ .vux-step-item-main {
    color: red;
  }
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

方法二：使用 >>>

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

<template>
  <div class="box-out">
   <step v-model="step1" background-color='#fbf9fe'>
        <step-item title="步骤一" description="step 1"></step-item>
        <step-item title="步骤二" description="step 2"></step-item>
        <step-item title="步骤三" description="step 3"></step-item>
    </step>
  </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
  name: 'box',
  data () {
    return {
       step1: 1,
      step2: 0
    }
  },components: {
      Step,
      StepItem,
      XButton,
      XHr
  }
}
</script>

<style scoped>
  /*
  修改样式
  通过使用 box-out 的class类，找到下面组件内的class类，中间必须得使用 >>> 才能找到下面的class类。
  */
  .box-out >>> .vux-step-item-main {
    color: red;
  }
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

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

前面两种方式是都是局部的（推荐），也是可以通过全局样式表改，当然记得在外面添加命名空间（不懂css 的命名空间的话，自行百度）。这个推不推荐的得看个人。希望能够根据业务需求进行增加修改。

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

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

</script>

<style>
/* 上面没加 scoped 属性，所以全局样式 */ 
.box-out .vux-step-item-main {
    color: red;
  }
</style>