Stylist
Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.
This is a fork of css-in-rust.
Install
Add the following to your Cargo.toml:
stylist = "0.9"Usage
For detailed usage, please see documentation.
Yew Integration
To style your component, you can use styled_component attribute with css!
macro.
use yew::prelude::*;
use stylist::yew::styled_component;
#[styled_component(MyStyledComponent)]
fn my_styled_component() -> Html {
html! {<div class={css!("color: red;")}>{"Hello World!"}</div>}
}Standalone
To create a stylesheet, you can use 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());Runtime Style
If you want to parse a string into a style at runtime, you can use 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());Theming
There's theming example using Yew Context API.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent