Uniapp 动态绑定class 样式

在uniapp中，给组件绑定外部class无效通常是因为你的绑定方式不正确。在uniapp中，你可以使用class属性来绑定外部的样式类。

组件vue

html 复制代码

<template>
  <view :class="[externalClass,customClass]">
    这是一个带有外部样式类的组件。
  </view>
</template>
 
<script>
export default {
  props:{
    customClass:String  //接收 动态class 
  },
  data() {
    return {
      // 假设你在外部定义了一个样式类 'my-external-class'
      externalClass: 'my-external-class'
    }
  }
}
</script>
 
<style lang="scss" scoped>
/* 在<style>标签外部定义样式类 */
.my-external-class {
  color: red;
  font-size: 16px;
}
</style>

引用组件：

html 复制代码

<template>
  <view :class="[classA, classB]">
    这是一个样式。
    <!--:customClass="classA"  这里动态绑定 :customClass="classA", 或是customClass="my-class-a" -->        
    <test :customClass="classA"></test>
  </view>
  
</template>

<script>
  import Test from "@/components/test/test.vue"
  export default {
    components: {
      Test
    },
    data() {
      return {
        classA: 'my-class-a',
        classB: 'my-class-b'
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 在<style>标签外部定义样式类 */
  .my-class-a {
    color: blue;
    background: linear-gradient( 180deg, #FFF1E3 0%, #FFFFFF 50%);
  }

  .my-class-b {
    font-size: 14px;
  }
</style>