Search code examples
cssvuejs3stylingprimevue

How to style the items in PrimeVue's Dataview differently in List and Grid mode?

When switching from list to grid mode in PrimeVue's DataView, the following changes happen in the DOM:

enter image description here

enter image description here

I don't understand why in both display modes, the direct parent of the items to be displayed in the Dataview is a grid. Only the grandparent div changes its class.

In List mode I would like to use a different flex display than in Grid mode. How can I achieve this? 🤔

Solution

  • All right, I found a working solution:

    .p-dataview-list :deep( .p-grid) {
    // my stlye
}

    In my previous attempts, I was using deep() the wrong way.