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! macro

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

Literal

use yew::{classes, html};

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

Multiple

use yew::{classes, html};

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

String

use yew::{classes, html};

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

Optional

use yew::{classes, html};

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

Vector

use yew::{classes, html};

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

Slice

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 style 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.