Stylist

Stylist 是为 WebAssembly 应用程序提供的 CSS-in-Rust 风格化解决方案。

这是从 css-in-rust 分支出来的。

安装

将以下内容添加到您的 Cargo.toml

stylist = "0.13"

用法

有关详细用法，请参阅 文档。

Yew 集成

要为组件添加样式，您可以使用带有 styled_component 属性的 css! 宏。

use yew::prelude::*;
use stylist::yew::styled_component;

#[styled_component]
fn MyStyledComponent() -> Html {
    html! {<div class={css!("color: red;")}>{"Hello World!"}</div>}
}

独立

要创建样式表，您可以使用 style!

use stylist::style;

let style = style!(
   // A CSS string literal
   r#"
       background-color: red;

       .nested {
           background-color: blue;
           width: 100px
       }
   "#
).expect("Failed to mount style");

// stylist-uSu9NZZu
println!("{}", style.get_class_name());

运行时样式

如果您想要在运行时将字符串解析为样式，您可以使用 Style::new

use stylist::Style;

let style_str = r#"
    background-color: red;

    .nested {
        background-color: blue;
        width: 100px
    }
"#;

let style = Style::new(style_str).expect("Failed to create style");

// stylist-uSu9NZZu
println!("{}", style.get_class_name());

主题化

有使用 Yew 上下文 API 的主题化示例。