Isaribi

您可以使用组件的独立类名。组件中的类名将被映射为格式：__[随机字符串]_[类名]。这意味着您可以为组件编写独特的样式表。

Isaribi不仅可以用于Yew，还可以用于Kagura等。

在Yew中使用

extern crate isaribi;

use isaribi::{
    style,
    styled::{Style, Styled},
};
use wasm_bindgen::prelude::*;
use yew::prelude::*;

struct Model {}

enum Msg {}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        Self {}
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        true
    }

    fn change(&mut self, _: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        Self::styled(html! {
            <div class=Self::class("base")>
                <h1>{"Helllo from Isaribi"}</h1>
            </div>
        })
    }
}

impl Styled for Model {
    fn style() -> Style {
        style! {
            ".base" {
                "position": "fixed";
                "top": "0";
                "left": "0";
                "width": "100vw";
                "height": "100vh";
                "color": "#ffffff";
            }

            ".base > h1" {
                "width": "max-content";
                "margin-left": "auto";
                "margin-right": "auto";
            }

            @media "(orientation: landscape)" {
                ".base" {
                    "background-color": "#0366d6";
                }
            }

            @media "(orientation: portrait)" {
                ".base" {
                    "background-color": "#d73a49";
                }
            }
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}