Updating style does not work properly

Dash Python
1

Hello everyone,

I’m currently trying to build a dashboard with dash. For the pages I’m building I need a grid layout and decided not to use cards as described in this example because I want a more flexible way to customize the layout, hence why I use css grid like so:

# Grid
class Grid:
    STYLE = {
        "border-radius": "5px",
        "box-shadow": "0 4px 8px 0 rgba(0,0,0,0.2)",
    }
    HEADER_STYLE = {
        "background": "#3c3c3c",
        "margin": "5px 5px 5px 5px"
    }
    BODY_STYLE = {
        "background": "#A0A0A0",
        "margin": "5px 5px 5px 5px"
    }

    # define a grid wrapper that is square
    def GRID_WRAPPER_EQUAL(rep: int=2):
        return {
            "display": "grid",
            "grid-template-columns": f"repeat({rep}, 1fr)",
            "grid-template-rows": f"repeat({rep}, 1fr)",
        }
#     # grid wrapper with any layout as defined in rows/cols (list of fractions) 
    def GRID_WRAPPER_CUSTOM(cols: list[int], rows: list[int]):
        return {
            "display": "grid",
            "grid-template-columns": "fr ".join(str(c) for c in cols) + "fr",
            "grid-template-rows": "fr ".join(str(r) for r in rows) + "fr",
            # other styling
            "background-color": "#8c8c8c",
            "padding": "1rem",
            "box-sizing": "border-box",
        }
    # position of a div item in the grid
    def GRID_ITEM(row_start, col_start, row_stretch=1, col_stretch=1):
        return {
            "grid-column-start": col_start,
            "grid-column-end": "span " + str(col_stretch),
            "grid-row-start": row_start,
            "grid-row-end": "span " + str(row_stretch),
        }

So far so good. I can use the grid styling to create elements but the issue arises when I then try to give additional styling to my grid items or the grid itself. The way I tried it is by using the update method on the dictionary that I pass into the styling. Checking the value of the “style” at runtime with the debugger, I see that this works as intended:

    content = html.Div(
        id=f'plan-{br}-card',
        className='card',
        style=Grid.GRID_WRAPPER_CUSTOM(cols=[1, 1], rows=[1]).update(Grid.STYLE),
        children= [
                # ...
        ]
    )

But running this will result in the following:

image
image781×241 7.66 KB

Whereas not using the ‘update’ method on the dictionary (hence leaving out whatever is defined in Grid.STYLE) will result in the following:

image
image781×189 6.82 KB

As you can see, a bunch of styling gets lost simply by appending the “style” dict by two values for “border-radius” and “box-shadow”. Even that does not seem to be the culprit here though, because I commented those kv-pairs out and essentially updated the “style” dict with an empty dict. The result was the same.

Now my question is: what am I doing wrong and how do I properly add additional styling to my components?

I realize that the snippets I provided are not executable right away but I hope that the screenshots I provided help in seeing what I do. I can rewrite the code a little bit so I can share more of it, if you need that to reproduce the issue.
I figure that the info provided should be enough though- let me know if I’m wrong.

2

So I figured out a solution to this which is using the following syntax instead of using dict.update():
style=Grid.GRID_WRAPPER_CUSTOM(cols=[1, 1], rows=[1]) | Grid.STYLE
For some reason this works while update does not.