実現したいこと
PrimeVueのDialogコンポーネントにスタイルをあてたいです。
前提
viteで環境構築したVueでPrimeVueを導入しています。
Dialogコンポーネントにスタイルをあてたいのですが、styleタグにcssを書いても反映されませんでした。
発生している問題・エラーメッセージ
スタイルが反映されない
該当のソースコード
分かりやすいように、Dialogコンポーネントの背景を赤色にしようと思って実装してみました。
main.ts
1import { createApp } from "vue"; 2import PrimeVue from "primevue/config"; 3import App from "./App.vue"; 4//theme 5import "primevue/resources/themes/lara-light-indigo/theme.css"; 6 7const app = createApp(App); 8app.use(PrimeVue); 9app.mount("#app");
index.html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Vite + Vue + TS</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 <script type="module" src="/src/main.ts"></script> 12 </body> 13</html>
App.vue
1<script setup lang="ts"> 2import PrimeVue from "./components/PrimeVue.vue"; 3</script> 4 5<template> 6 <PrimeVue /> 7</template> 8 9<style scoped></style>
PrimeVue.vue
1<script setup lang="ts"> 2import Button from "primevue/button"; 3import Dialog from "primevue/dialog"; 4import { ref } from "vue"; 5 6const visible = ref(false); 7 8const dialog = async () => { 9 visible.value ? (visible.value = false) : (visible.value = true); 10}; 11</script> 12 13<template> 14 <Button label="dialog" @click="dialog" /> 15 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }"> 16 <p> 17 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 18 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 19 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 20 culpa qui officia deserunt mollit anim id est laborum. 21 </p> 22 </Dialog> 23</template> 24 25<style scoped> 26:deep(.p-dialog) { 27 background-color: red; 28} 29</style>
試したこと
公式ドキュメントをもとに「:deep」を使ってみましたが、スタイルが反映されませんでした。
補足情報（FW/ツールのバージョンなど）
package.json
1{ 2 "name": "primevue", 3 "private": true, 4 "version": "0.0.0", 5 "type": "module", 6 "scripts": { 7 "dev": "vite", 8 "build": "vue-tsc && vite build", 9 "preview": "vite preview", 10 }, 11 "dependencies": { 12 "primevue": "^3.29.1", 13 "ts-node": "^10.9.1", 14 "vue": "^3.2.47" 15 }, 16 "devDependencies": { 17 "@vitejs/plugin-vue": "^4.1.0", 18 "typescript": "^5.0.2", 19 "vite": "^4.3.9", 20 "vue-tsc": "^1.4.2" 21 } 22} 23
0 コメント