AG Grid not reading in CSS style

Dash Python
1

I have a few css entries in assets/stylesheets.css that customize my AG Grid component. For example,

.ag-theme-alpine {
     --ag-font-size: "1rem";
     --ag-font-family: Roboto;
}

However, the component does not respect them. When I run the app locally in debug mode, what I notice is that if I change something in the .css while the app runs and save the file (e.g. just add an empty line), then the css is picked up when the app refreshes. But never picked up on the initial load.
My component is defined as follows:

   default_col_def = {
        "resizable": False,
        "sortable": True,
        "editable": False,
        "wrapText": True,
        "suppressMenu": True, # kills the fitler appearing on hover near the header
        "filter": True,
        "floatingFilter": True,
        "floatingFilterComponentParams": {"suppressFilterButton": True},
        "filterParams": {"caseSensitive": True,
                         "filterPlaceholder": "Filtrera...",
                         "suppressAndOrCondition": True,
                         },
    }
    table = dag.AgGrid(
        id="main_table",
        className="ag-theme-alpine",
        defaultColDef=default_col_def,
        dangerously_allow_code=False
    )

Maybe someone has an idea of what the issue might be?

2

Hello @timofeymukha,

What happens if you open in an incognito window?

3

Hello @jinnyzor, thanks for your reply ! Incognito does not seem to have any effect.

4

Hmmm, ok.

Instead of trying to manipulate the default class, try adding a secondary class:

className="ag-theme-alpine ag-custom-class",

.ag-theme-alpine.ag-custom-class {
     --ag-font-size: "1rem";
     --ag-font-family: Roboto;
}
1 Like
5

This worked, thank you very much for the help! Out of curiosity, what is the mechanism here?

1 Like
6

My guess is that because the component imports the stylesheet for you, that technically it overwrites the applied custom css until reloaded by adjustments.

7

If you just add CSS with this selector, it’s ambiguous, dependent on loading order or how the stylesheets are positioned on the page (and Dash doesn’t really guarantee this), which one wins. But you can make your override win by increasing the specificity, for example doubling the class with no space between:

.ag-theme-alpine.ag-theme-alpine {
2 Likes