Vue 使用 渲染函数时，定义在Style 中的css却不生效

Vue 使用 渲染函数时

在函数中设定元素的类名，css写在style之中，页面跑起来之后，在元素身上可以找到类名的、但是style中的css样式类没有被编译出

定义在Style 中的css却不生效

如下图

2处 的 icon-dot 虽然被绑定在元素身上了，但是在控制台的css看就没有，导致3处页面就没有效果

源码

<script>
import { h } from "vue";
// const STATUS_MAPPER = {
//   1: "启用",
//   2: "停用",
//   3: "删除",
// };

export default {
  props: {
    prefixtType: {
      type: String,
      default: "circle",
    },
    status: {
      type: Number,
      default: 1,
    },
    label: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    const childrens = [];

    // label
    if (props.label) {
      childrens.push(h("span", props.label));
    }

    const iClassList = ["icon-dot"];

    // defalut class
    if (props.status == 1) {
      iClassList.push("text-success");
    }

    childrens.push(h("i", { class: iClassList }));

    return () => h("div", { class: "prefix-sign-cont" }, [childrens]);
  },
};
</script>

<style lang="scss" scoped>
.prefix-sign-cont {
  display: inline-block;

  .icon-dot {
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 6px;
  }

  .text-success {
    background-color: #67c23a;
  }

 
}
</style>

多半是优先级不够，被优先级高的样式直接覆盖了，所以不生效