使用 classes! 宏处理 CSS 类

Yew 并没有提供原生的 CSS-in-Rust 解决方案，但通过提供编程方式与 HTML class 属性交互的方式来辅助样式。

classes! 宏

classes! 宏和相关的 Classes 结构简化了 HTML 类的使用：

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>
};

更多 CSS 相关的内容请参见这个文档。

内联样式

目前 Yew 并没有提供特殊的辅助工具来处理通过 style 属性指定的内联样式，但你可以像处理其他 HTML 属性一样处理它：

use yew::{classes, html};

html! {
  <div style="color: red;"></div>
};

更多 CSS 相关的内容请参见这个文档。