Closed Madoshakalaka closed 2 years ago
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.
@WorldSEnder I....forgot we are writing sass and things are nestable...Thanks!!! That helps a ton!
Consider the following yew code:
the children has to be individually styled, and it can produce some HTML like this:![image](https://user-images.githubusercontent.com/44753941/131796239-42f48427-5ed6-4191-b457-afbdc8aa0eb7.png)
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?