[{"data":1,"prerenderedAt":460},["ShallowReactive",2],{"\u002Farticles\u002Fprimevue-style-override":3,"\u002Farticles\u002Fprimevue-style-override-surround":449},{"id":4,"title":5,"author":6,"body":7,"date":433,"description":18,"draft":434,"extension":435,"image":6,"lastmod":433,"meta":436,"minRead":6,"navigation":278,"path":445,"seo":446,"stem":447,"__hash__":448},"articles\u002Farticles\u002Fprimevue-style-override.md","PrimeVue Style Override",null,{"type":8,"value":9,"toc":424},"minimark",[10,15,19,23,31,36,211,225,229,322,325,329,406,409,413,421],[11,12,14],"h2",{"id":13},"intro","Intro",[16,17,18],"p",{},"The PrimeVue UI component library provides a wide range of components with their own design. In some cases, we need to customize them to better suit our own needs. There are different ways we can override the default styles of PrimeVue, but we need to keep a few things in mind to reduce headaches later down the line 😅.",[11,20,22],{"id":21},"examples","Examples",[16,24,25,26,30],{},"When working with CSS, we sometimes use the ",[27,28,29],"code",{},"!important"," rule to override existing styles. Although it might get the job done in most cases, it can also create a lot of style conflicts as a project grows. Therefore, custom styles should be put into scoped styles, not in a global style. Funny enough, sometimes even scoped styles don't work 😝. But there are still other workarounds we know but might have forgotten about. I wanted to give a refresher.",[32,33,35],"h3",{"id":34},"scoped","Scoped",[37,38,44],"pre",{"className":39,"code":40,"filename":41,"language":42,"meta":43,"style":43},"language-scss shiki shiki-themes material-theme-lighter one-light one-dark-pro","\u003Cstyle scoped>\n\u002F\u002F Primarily works for single element components\n.p-inputtext {\n  background-color: #f0f4f8;\n  border: 2px solid transparent;\n  border-radius: 5px;\n  padding: 10px 15px;\n  font-size: 16px;\n  color: #333;\n}\n\u003C\u002Fstyle>\n","main.scss","scss","",[27,45,46,62,69,84,104,129,144,164,179,194,200],{"__ignoreMap":43},[47,48,51,55,59],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sM89C","\u003C",[47,56,58],{"class":57},"sJvnO","style",[47,60,61],{"class":53}," scoped>\n",[47,63,65],{"class":49,"line":64},2,[47,66,68],{"class":67},"seacL","\u002F\u002F Primarily works for single element components\n",[47,70,72,76,80],{"class":49,"line":71},3,[47,73,75],{"class":74},"svDm9",".",[47,77,79],{"class":78},"s6wAS","p-inputtext",[47,81,83],{"class":82},"sB4Xn"," {\n",[47,85,87,91,94,97,101],{"class":49,"line":86},4,[47,88,90],{"class":89},"sGRuu","  background-color",[47,92,93],{"class":82},":",[47,95,96],{"class":74}," #",[47,98,100],{"class":99},"stV9d","f0f4f8",[47,102,103],{"class":82},";\n",[47,105,107,110,112,116,120,124,127],{"class":49,"line":106},5,[47,108,109],{"class":89},"  border",[47,111,93],{"class":82},[47,113,115],{"class":114},"sriKn"," 2",[47,117,119],{"class":118},"sLhkd","px",[47,121,123],{"class":122},"sngOx"," solid",[47,125,126],{"class":122}," transparent",[47,128,103],{"class":82},[47,130,132,135,137,140,142],{"class":49,"line":131},6,[47,133,134],{"class":89},"  border-radius",[47,136,93],{"class":82},[47,138,139],{"class":114}," 5",[47,141,119],{"class":118},[47,143,103],{"class":82},[47,145,147,150,152,155,157,160,162],{"class":49,"line":146},7,[47,148,149],{"class":89},"  padding",[47,151,93],{"class":82},[47,153,154],{"class":114}," 10",[47,156,119],{"class":118},[47,158,159],{"class":114}," 15",[47,161,119],{"class":118},[47,163,103],{"class":82},[47,165,167,170,172,175,177],{"class":49,"line":166},8,[47,168,169],{"class":89},"  font-size",[47,171,93],{"class":82},[47,173,174],{"class":114}," 16",[47,176,119],{"class":118},[47,178,103],{"class":82},[47,180,182,185,187,189,192],{"class":49,"line":181},9,[47,183,184],{"class":89},"  color",[47,186,93],{"class":82},[47,188,96],{"class":74},[47,190,191],{"class":99},"333",[47,193,103],{"class":82},[47,195,197],{"class":49,"line":196},10,[47,198,199],{"class":82},"}\n",[47,201,203,206,208],{"class":49,"line":202},11,[47,204,205],{"class":53},"\u003C\u002F",[47,207,58],{"class":57},[47,209,210],{"class":53},">\n",[16,212,213,214,217,218,221,222,224],{},"In Vue, we can use a selector called ",[27,215,216],{},":deep()"," to override child component styles when they have nested elements, such as the ",[27,219,220],{},"TabView"," component. If you want to change the tab header text color, just putting it into scoped styles will not work. We need to wrap the class with the ",[27,223,216],{}," selector to override the style.",[32,226,228],{"id":227},"deep-selector","Deep Selector",[37,230,232],{"className":39,"code":231,"filename":41,"language":42,"meta":43,"style":43},"\u003Cstyle scoped>\n.p-tabview-header a {\n  color: brown; \u002F\u002F won't have any effect\n}\n\n:deep(.p-tabview-header a) {\n  color: brown; \u002F\u002F will change the color to brown\n}\n\u003C\u002Fstyle>\n",[27,233,234,242,254,270,274,280,297,310,314],{"__ignoreMap":43},[47,235,236,238,240],{"class":49,"line":50},[47,237,54],{"class":53},[47,239,58],{"class":57},[47,241,61],{"class":53},[47,243,244,246,249,252],{"class":49,"line":64},[47,245,75],{"class":74},[47,247,248],{"class":78},"p-tabview-header",[47,250,251],{"class":57}," a",[47,253,83],{"class":82},[47,255,256,258,260,264,267],{"class":49,"line":71},[47,257,184],{"class":89},[47,259,93],{"class":82},[47,261,263],{"class":262},"soO3g"," brown",[47,265,266],{"class":82},";",[47,268,269],{"class":67}," \u002F\u002F won't have any effect\n",[47,271,272],{"class":49,"line":86},[47,273,199],{"class":82},[47,275,276],{"class":49,"line":106},[47,277,279],{"emptyLinePlaceholder":278},true,"\n",[47,281,282,285,287,289,291,294],{"class":49,"line":131},[47,283,284],{"class":53},":deep(",[47,286,75],{"class":74},[47,288,248],{"class":78},[47,290,251],{"class":57},[47,292,293],{"class":53},") ",[47,295,296],{"class":82},"{\n",[47,298,299,301,303,305,307],{"class":49,"line":146},[47,300,184],{"class":89},[47,302,93],{"class":82},[47,304,263],{"class":262},[47,306,266],{"class":82},[47,308,309],{"class":67}," \u002F\u002F will change the color to brown\n",[47,311,312],{"class":49,"line":166},[47,313,199],{"class":82},[47,315,316,318,320],{"class":49,"line":181},[47,317,205],{"class":53},[47,319,58],{"class":57},[47,321,210],{"class":53},[16,323,324],{},"However, there are some components where even these two methods won't work. The reason behind it is that those components are appended to the body. We need to add a custom class and then apply the style so that it doesn't conflict with other components. An important note is to maintain specificity, or else it won't work.",[32,326,328],{"id":327},"custom-class","Custom Class",[37,330,332],{"className":39,"code":331,"filename":41,"language":42,"meta":43,"style":43},"\u003Cstyle lang=\"scss\">\n.custom-modal {\n  background-color: red; \u002F\u002F won't have any effect\n}\n.custom-modal .p-dialog-content {\n  background-color: red;\n}\n\u003C\u002Fstyle>\n",[27,333,334,343,352,366,370,384,394,398],{"__ignoreMap":43},[47,335,336,338,340],{"class":49,"line":50},[47,337,54],{"class":53},[47,339,58],{"class":57},[47,341,342],{"class":53}," lang=\"scss\">\n",[47,344,345,347,350],{"class":49,"line":64},[47,346,75],{"class":74},[47,348,349],{"class":78},"custom-modal",[47,351,83],{"class":82},[47,353,354,356,358,362,364],{"class":49,"line":71},[47,355,90],{"class":89},[47,357,93],{"class":82},[47,359,361],{"class":360},"sUz_E"," red",[47,363,266],{"class":82},[47,365,269],{"class":67},[47,367,368],{"class":49,"line":86},[47,369,199],{"class":82},[47,371,372,374,376,379,382],{"class":49,"line":106},[47,373,75],{"class":74},[47,375,349],{"class":78},[47,377,378],{"class":74}," .",[47,380,381],{"class":78},"p-dialog-content",[47,383,83],{"class":82},[47,385,386,388,390,392],{"class":49,"line":131},[47,387,90],{"class":89},[47,389,93],{"class":82},[47,391,361],{"class":360},[47,393,103],{"class":82},[47,395,396],{"class":49,"line":146},[47,397,199],{"class":82},[47,399,400,402,404],{"class":49,"line":166},[47,401,205],{"class":53},[47,403,58],{"class":57},[47,405,210],{"class":53},[16,407,408],{},"All the above methods can be used with any component library. Lastly, PrimeVue provides a pass-through method where we can easily pass in styles and PrimeFlex classes to customize the components based on our needs.",[11,410,412],{"id":411},"explanation","Explanation",[16,414,415],{},[416,417,418],"a",{"href":418,"rel":419},"https:\u002F\u002Fprimevue.org\u002Fpassthrough\u002F",[420],"nofollow",[58,422,423],{},"html pre.shiki code .sM89C, html code.shiki .sM89C{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sJvnO, html code.shiki .sJvnO{--shiki-light:#E2931D;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .seacL, html code.shiki .seacL{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#A0A1A7;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html pre.shiki code .svDm9, html code.shiki .svDm9{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .s6wAS, html code.shiki .s6wAS{--shiki-light:#E2931D;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sB4Xn, html code.shiki .sB4Xn{--shiki-light:#39ADB5;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sGRuu, html code.shiki .sGRuu{--shiki-light:#8796B0;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .stV9d, html code.shiki .stV9d{--shiki-light:#90A4AE;--shiki-default:#0184BC;--shiki-dark:#D19A66}html pre.shiki code .sriKn, html code.shiki .sriKn{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sLhkd, html code.shiki .sLhkd{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#E06C75}html pre.shiki code .sngOx, html code.shiki .sngOx{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#D19A66}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soO3g, html code.shiki .soO3g{--shiki-light:#90A4AE;--shiki-default:#986801;--shiki-dark:#ABB2BF}html pre.shiki code .sUz_E, html code.shiki .sUz_E{--shiki-light:#90A4AE;--shiki-default:#986801;--shiki-dark:#D19A66}",{"title":43,"searchDepth":64,"depth":64,"links":425},[426,427,432],{"id":13,"depth":64,"text":14},{"id":21,"depth":64,"text":22,"children":428},[429,430,431],{"id":34,"depth":71,"text":35},{"id":227,"depth":71,"text":228},{"id":327,"depth":71,"text":328},{"id":411,"depth":64,"text":412},"2024-08-03",false,"md",{"slug":437,"difficulty":438,"icon":439,"ogImage":440,"tags":441,"topic":444},"primevue-style-override","beginner","vue",{"alt":5},[42,442,443],"prime-vue","tips-tricks","primevue","\u002Farticles\u002Fprimevue-style-override",{"title":5,"description":18},"articles\u002Fprimevue-style-override","KcEFsHaT1b6ELNK_7mWaOf3G3gZXkuUCD71puwHeM9I",[450,455],{"title":451,"path":452,"stem":453,"description":454,"children":-1},"Nuxt Server-Side Proxy for Open Weather Api","\u002Farticles\u002Fopen-weather-proxy","articles\u002Fopen-weather-proxy","A common problem when using open weather api is Cross-Origin Resource Sharing (CORS) issues. This typically happens when you're trying to make an API call from a web application running in a browser, and the browser blocks the request because the API server does not include the necessary CORS headers in its response. The quickest fix is to add a cors header however, as we do not control the api server we can not add a cors header even if we wanted too.",{"title":456,"path":457,"stem":458,"description":459,"children":-1},"Unique approach of CSS custom property great flexibility and modularity","\u002Farticles\u002Funique-css-custom-property","articles\u002Funique-css-custom-property","CSS Custom Properties offers great flexibility and modularity to a stylesheet. Allows developers to centralize values, simplify maintaining and updating multiple elements at once across the entire project. The use of custom properties can go from simple color, shadow values to do dynamic changes to styles based on user interactions or other events using JavaScript.",1778820754461]