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:

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