Vue3环境下如何修改PrimeVue组件的字体家族、字号与字重

首先确保你的项目中已正确引入Lato字体，以下提供三种适配Vue3组合式API的实现方式：

方式一：使用Pass Through（PT）属性（官方推荐，无样式污染） #

PrimeVue的PT属性支持直接为组件内部元素指定样式，无需穿透选择器，适合单个Dropdown组件单独定制的场景：

<template>
  <Dropdown 
    v-model="selectedValue" 
    :options="options"
    :pt="{
      // 下拉框选中项展示区
      label: {
        style: {
          fontFamily: 'Lato, sans-serif',
          fontWeight: 'bold',
          fontSize: '1.2vw'
        }
      },
      // 下拉选项列表每一项
      item: {
        style: {
          fontFamily: 'Lato, sans-serif',
          fontWeight: 'bold',
          fontSize: '1.2vw'
        }
      }
    }"
  />
</template>

<script setup>
import { ref } from 'vue'
import Dropdown from 'primevue/dropdown'

const selectedValue = ref(null)
const options = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 }
]
</script>

方式二：全局样式覆盖（适合所有Dropdown统一生效） #

在全局样式文件（如style.css）中添加如下样式：

/* 下拉框选中展示区 */
.p-dropdown .p-dropdown-label {
  font-family: 'Lato, sans-serif';
  font-weight: bold;
  font-size: 1.2vw;
}
/* 下拉选项列表 */
.p-dropdown .p-dropdown-item {
  font-family: 'Lato, sans-serif';
  font-weight: bold;
  font-size: 1.2vw;
}

方式三：单文件组件scoped样式内修改 #

如果仅需在某个父组件内修改Dropdown样式，可使用Vue3的深度选择器：

<template>
  <div class="demo-container">
    <Dropdown v-model="selectedValue" :options="options" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Dropdown from 'primevue/dropdown'

const selectedValue = ref(null)
const options = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 }
]
</script>

<style scoped>
.demo-container :deep(.p-dropdown-label),
.demo-container :deep(.p-dropdown-item) {
  font-family: 'Lato, sans-serif';
  font-weight: bold;
  font-size: 1.2vw;
}
</style>

提示：如果样式未生效，可通过浏览器开发者工具检查Dropdown实际渲染的类名，调整选择器优先级即可。

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