CSS with classes!

Yew 并没有本地提供 Rust 中的 CSS 解决方案，但是它通过提供编程式的方式与 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>
};

我们将在 more HTML 中扩展这个概念。

Inline Styles

目前，Yew没有为通过 styles 属性指定的内联样式提供任何特殊帮助，但是您可以像使用其他HTML属性一样使用它：

use yew::{classes, html};

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

我们将在 more CSS 章节中对这个概念进行更深入的讲解。