如何为PrimeVue的InputText组件添加样式（CDN场景）

使用CDN方式引入PrimeVue时，p-calendar等复杂组件样式正常生效，但p-inputtext完全没有样式效果。

解决方案 #

PrimeVue的InputText组件需要依赖PrimeVue基础样式文件才能正常显示样式，你当前只引入了主题样式，缺少核心的基础组件样式。只需在<head>中添加primevue.min.css的引入即可：

<link href="//unpkg.com/primevue@3.52.0/resources/primevue.min.css" rel="stylesheet" />

修改后的完整代码 #

<html>
  <head>
    <!-- 引入PrimeVue主题样式 -->
    <link href="//unpkg.com/primevue@3.52.0/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
    <!-- 新增：引入PrimeVue基础组件样式 -->
    <link href="//unpkg.com/primevue@3.52.0/resources/primevue.min.css" rel="stylesheet" />
    
    <script src="//unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
    <script src="//unpkg.com/primevue@3.52.0/core/core.min.js"></script>
    <script src="//unpkg.com/primevue@3.52.0/inputtext/inputtext.min.js"></script>
  </head>

  <body>
    <div id="app">
      <p-inputtext v-model="text"></p-inputtext>
      <h1>{{ text }}</h1>
    </div>
  </body>
  <script>
    const { createApp, ref } = Vue
    const App = {
      setup() {
        const text = ref("")
        return { text }
      }
    }
    createApp(App)
     .use(primevue.config.default)
     .component('p-inputtext', primevue.inputtext)
     .mount("#app")
  </script>
</html>

原因说明 #

• 复杂组件如p-calendar通常包含更完整的样式依赖，可能在自身资源中包含必要的基础样式，或者其依赖的其他模块间接引入了基础样式。
• 而p-inputtext是轻量型组件，样式完全依赖PrimeVue的基础样式文件，必须显式引入才能生效。

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