Conditional formatting of an html element

Dash Python
2

Hi,

In principle you can use the “style” prop in a callback. Here’s a tiny example:

from dash import Dash, html, dcc, Output, Input, State

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Input(id="input"),
        html.H4(id="heading", children="A Heading")
    ]
)

@app.callback(
    Output("heading", "style"),
    Input("input", "value")
)
def update_style(value):
    return {
        "color": value
    }

if __name__ == "__main__":
    app.run_server(debug=True)

Please also note that the style will be entirely overwritten by the callback, so if you have extra parameters when you define the component in the first place, you should pass also the State and combine the current style with the new one.

1 Like