CSS with classes!

Yew does not natively provide a css in rust solution, but helps with styling by providing programmatic ways to interact with the html class attribute.

Classes

The classes! macro and associated Classes struct simplify the use of HTML classes:

• Literal
• Multiple
• String
• Optional
• Vector
• Slice

use yew::{classes, html};
html! {
  <div class={classes!("container")}></div>
};

use yew::{classes, html};
html! {
  <div class={classes!("class-1", "class-2")}></div>
};

use yew::{classes, html};
html! {
  <div class={classes!(String::from("class-1 class-2"))}></div>
};

use yew::{classes, html};
html! {
  <div class={classes!(Some("class"))} />
};

use yew::{classes, html};
html! {
  <div class={classes!(vec!["class-1", "class-2"])}></div>
};

use yew::{classes, html};
html! {
  <div class={classes!(["class-1", "class-2"].as_ref())}></div>
};

We will expand upon this concept in more CSS.

Inline Styles

Currently Yew does not provide any special help with inline styles specified via the styles attribute, but you can use it like any other html attribute:

use yew::{classes, html};
html! {
  <div style="color: red;"></div>
};

We will expand upon this concept in more CSS.