How can a signal update a class style?

[veniamin-ilmer]

Reading through the book I can see you can update any individual element's style or class.

However I have many elements which all use the same class. I would like to modify the class's style rather than all of those elements.

I can't figure out how to do this. I found there are several different ways to tell Leptos about a class style. One way is with leptos_meta::Style. I tried to use a signal in that string:

<Style>
  move || format!("button {
    width: {}
    height: {}
  }", button_width(), button_height());
</Style>

This doesn't work. the signals seem to be ignored..

I also tried using stylers and styled crates. In both cases, they don't seem to support a closure in their macro.

So, I am unclear, how can I dynamically update the class?

[gbj]

Using CSS variables is a good solution here, and they can be set with the style syntax (although they require tuples like fancy strings because of the -- prefix)

#[component]
pub fn App() -> impl IntoView {
    let (count, set_count) = create_signal(50);

    view! {
        <div
            style=("--width", move || format!("{}px", count()))
            style=("--height", move || format!("{}px", count()))
        >
            <button on:click=move |_| set_count.update(|n| *n += 10)>
                "Growing"
            </button>
        </div>
    }
}

with the CSS

button {
	width: var(--width);
	height: var(--height);
}