NiceGUI v3 has taken away my ability to customize using CSS

[amks1]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

@ui.page('/testbuttoncss')
async def testbuttoncss_page():
    ui.add_css("""
        .mytestbutton {
            background-color: red !important;
        }
    """)
    ui.button('Test Button').classes('mytestbutton')

Description

Output in v2.24.1:

Output in v3.0.3:

This has been referenced in this issue which has been closed as not planned. But can someone please tell me what to do with the hundreds of css classes I've painstakingly defined for various components across my app? Does Quasar expect us not to use CSS and only use the color prop? What about properties other than the color? No reusability or inheritance??

The issue is not just with buttons. I used to disable inputs using .disable() and override the not-allowed cursor through css to allow text selection, but that stopped working and I had to rewrite all disables with .props('readonly').

I'm guessing there are other affected components as well. Since all my tests check for functionality and not styles, it may be weeks or months before I catch some styling issue in some corner of my app. Can someone guide me? What's the logic here?

NiceGUI Version

3.0.3

Python Version

3.13.7

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @amks1 thanks for the report. Sorry for the trouble of 3.0.

Although #4415 closed as unplanned, in 3.0 we do CSS layers and we actually managed to "nerf Quasar's !importants" in #5171 instead. I wrote it so I know it.

But to leverage that, you will need to move your CSS into layers. As to which layer, I can't think of which off the top of my head. But it has to be one of these, though.

nicegui/nicegui/templates/index.html

Line 8 in c5c9dfe

@layer theme, base, quasar, nicegui, components, utilities, overrides, quasar_importants;

[amks1]

Thanks for the quick reply. I had no idea about the @layer feature of css, I just read up about it.
Here's the new, working code snippet. @layer overrides works as well, but I moved it up to components just in case.

@ui.page('/testbuttoncss')
async def testbuttoncss_page():
    ui.add_css("""
        @layer components {
            .mytestbutton {
                background-color: red;
            }
        }
    """)
    ui.button('Test Button').classes('mytestbutton')

IMO the Nicegui documentation should be clearer about this, it only talks about Tailwind CSS layers.

[evnchn]

Honestly yes. Do you want to draft the text and PR to the docs?

[amks1]

Will do, give me a couple of hours.

[falkoschindler]

Sorry, @amks1! We spent a lot of effort to keep supporting things like

ui.button().style('background-color: #123456 !important')

But we didn't really think about the use case of custom CSS in user code. We should add a hint to the release notes.

Have a look into #5211 (comment) for a similar example. There I suggested to use @layer quasar, since that's where all (non-important) Quasar definitions live.