Need a way to style a components children in Yew

[Madoshakalaka]

Consider the following yew code:

html! {

        <ul class={container}>
            {for props.children().iter()}
        </ul>
    };

the children has to be individually styled, and it can produce some HTML like this:

Notice the <li>s all had the same class.

A better way is to use css child selector, but unfortunately it doesn't work here. One will have to parse the parent's class name at runtime, write runtime css with child selector, add the css in a <Global>. It's neither performant nor ergonomic since one can't write the css in a component's body.

Are there better solutions?

[WorldSEnder]

The following example seems to work for me

        let children = (0..5).map(|i| html! {<li><span>{format!("Item: {}", i)}</span></li>});
        let container = css!(
            r#"
            display: grid;
            & li {
                color: green;
            }"#
        );
        html! {
            <div class=self.style()>
                <ul class={container}>
                    {for children}
                </ul>
            </div>
        }

This applies the display: grid to the <ul> item, and the color: green to the individual children. Can you post the css you tried? If you used inline style, it might have to do with spacing issues.

[Madoshakalaka]

@WorldSEnder I....forgot we are writing sass and things are nestable...Thanks!!! That helps a ton!