Cannot style elements using CSS



  • I cannot style elements/template using CSS inside styles (<style></style>)
    Styling elements inside tag is working (<p style=“color: black” ), but now with CSS


  • Admin

    @chiragiem36 You are definitely doing a misuse somewhere. Can you post a reproduction repo so we can all take a look and help you? Thanks.



  • Have the same problem, quasar.mat.styl seems to be taken after the style set in Hello.vue (for ex.)
    see chrome css inspector: https://pasteboard.co/GQ8KuxG.png
    (I’m in dev, not prod)



  • just so this is complete:
    I set my class on a button component like this: <q-btn flat class=“main-toolbar-btn”>
    and at the bottom of my Hello.vue file:
    <style lang=“stylus”>
    .main-toolbar-btn
    width 70px
    border-left-width 1px
    height 98px
    border-left-color #dcdada
    border-left-style solid
    margin 0
    color #4d5154
    </style>



  • and putting the style in the app.mat.styl does the same
    basically, I’m trying to override the margin set in quasar.mat.styl at 2991:

    .q-btn
    margin 0 .2rem
    padding .2rem

    Maybe there is some basic css rules that just make it like so but having to put it in the style tag would be quite annoying as it would totally remove the advantage of using css.

    thx !



  • but if I override the exact same declaration found in quasar.mat.style (@2991) in my app.mat.styl like so:
    .q-toolbar

    .q-btn
    margin 0

    it works…
    So the best thing I can do is this:
    .q-toolbar

    .q-btn
    &.main-toolbar-btn
    width 70px
    border-left-width 1px
    height 98px
    border-left-color #dcdada
    border-left-style solid
    margin 0
    color #4d5154

    but this is kind of uncomfortable as I really need to specifically target classes…


  • Admin

    Can you confirm you are using the latest default starter kit? Quasar’s CSS should always come first and then component’s CSS.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.