Vue单文件组件如何根据prop条件决定是否引入style标签

Vue 单文件组件（SFC）中的 <style> 标签属于编译阶段静态处理的资源，编译后会被提前打包为静态CSS内容，无法直接通过运行时的组件props控制是否加载，你可以通过以下两种成熟方案实现需求：

方案1：动态插入style标签（完全符合需求，无需修改原有类名/样式逻辑） #

直接将默认样式存为JS字符串，根据useDefault的值决定是否插入到组件对应的DOM树中，完全不需要修改现有样式的选择器和类名：

<template>
  <section class="default-class" />
</template>

<script>
// 原<style>标签内的默认样式直接复制到这里
const defaultStyles = `
.default-class {
  margin: 0;
  padding: 16px;
  border-radius: 4px;
  /* 其余原有默认样式 */
}
`

export default {
  props: {
    useDefault: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    if (!this.useDefault) return
    // 创建style标签
    this.styleEl = document.createElement('style')
    this.styleEl.textContent = defaultStyles
    // 适配web component的shadow DOM场景
    const rootNode = this.$el.getRootNode()
    rootNode instanceof ShadowRoot ? rootNode.appendChild(this.styleEl) : document.head.appendChild(this.styleEl)
  },
  beforeUnmount() {
    // 组件销毁时清理style标签，避免泄漏
    this.styleEl?.remove()
  }
}
</script>

调用方式和你预期的完全一致：

<web-component use-default="false"></web-component>

方案2：CSS选择器包裹（改造成本最低，无需操作DOM） #

如果不想把样式抽离为JS字符串，可以给组件最外层容器加一个动态数据属性，所有默认样式都嵌套在该属性的选择器下，仅需在原有样式外层加一层包裹即可：

<template>
  <section class="default-class" :data-use-default="useDefault" />
</template>

<script>
export default {
  props: {
    useDefault: Boolean
  }
}
</script>

<style>
/* 仅需在原有所有默认样式外层加这一层选择器 */
[data-use-default="true"] {
  .default-class {
    /* 原有默认样式保持不变 */
  }
  /* 其他默认样式同样放在该层下 */
}
</style>

内容的提问来源于stack exchange，提问作者EzraMoore65