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:

      body .q-menu { border-radius: 0;} 

    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;} 

    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?


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

Log in to reply