Changing Border Radius on q-list (inside of q-btn-dropdown)

[moshemo]

I would like to change the border radius on a q-list component that I’m using in a dropdown button (q-btn-dropdown). However, it seems that one of those components adds a q-menu component which is hoisted to under the body tag and it is on that component that the border-radius styles are being set.

That means that the only way I know of changing the border radius is to target all q-menus. I.e., I could do something like this:

<style>
  body .q-menu { border-radius: 0;} 
</style>

But that would change all q-menu components whenever I use them. Of course, theoretically speaking I could scope the styles like this:

<style scoped>
  body .q-menu { border-radius: 0;} 
</style>

But for whatever reason I find that scoping doesn’t work with quasar. That is certainly the case here.

So what I am wondering is – is there a way to change the border-radius just for this usage of q-list (inside of q-btn-dropdown)? If so, how?

Thanks.

[metalsadman]

@moshemo you don’t need to override the q-menu class in your scope, you can just give your QBtnDropdown a content-class or content-style prop. https://codepen.io/metalsadman/pen/PooLXQg