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



  • 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.



  • @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


Log in to reply