ContextQMD
Back to Yew

CSS with classes!

website/docs/concepts/basic-web-technologies/css.mdx

0.18.01.7 KB
Original Source

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

Yew does not natively provide a CSS-in-Rust solution but helps with styling by providing programmatic ways to interact with the HTML class attribute.

classes! macro

The classes! macro and associated Classes struct simplify the use of HTML classes:

<Tabs> <TabItem value="Literal" label="Literal">
rust
use yew::{classes, html};

html! {
  <div class={classes!("container")}></div>
};
</TabItem> <TabItem value="Multiple" label="Multiple">
rust
use yew::{classes, html};

html! {
  <div class={classes!("class-1", "class-2")}></div>
};
</TabItem> <TabItem value="String" label="String">
rust
use yew::{classes, html};

html! {
  <div class={classes!(String::from("class-1 class-2"))}></div>
};
</TabItem> <TabItem value="Optional" label="Optional">
rust
use yew::{classes, html};

html! {
  <div class={classes!(Some("class"))} />
};
</TabItem> <TabItem value="Vector" label="Vector">
rust
use yew::{classes, html};

html! {
  <div class={classes!(vec!["class-1", "class-2"])}></div>
};
</TabItem> <TabItem value="Slice" label="Slice">
rust
use yew::{classes, html};

html! {
  <div class={classes!(["class-1", "class-2"].as_ref())}></div>
};
</TabItem> </Tabs>

We will expand upon this concept in more CSS.

Inline Styles

Currently Yew does not provide any special help with inline styles specified via the style attribute, but you can use it like any other HTML attribute:

rust
use yew::{classes, html};

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

We will expand upon this concept in more CSS.