I'm currently working on a Yew project and attempting to utilize the stylist crate for styling components. The primary focus is on using the styled_component macro as demonstrated in the Yew documentation. However, I've encountered a specific error that I'm struggling to resolve.
The goal is to style a Yew component using the following code snippet:
use yew::prelude::*;
use stylist::yew::styled_component;
use stylist::{css};
#[styled_component]
pub fn App() -> Html {
let sty = css!("color: red;");
html! {<div class={sty.clone()}>{"Hello World!"}</div>}
}
Upon attempting to compile the code, I receive the following error:
error[E0277]: the trait bound `Classes: From<StyleSource>` is not satisfied
--> src/lib.rs:8:24
| 8 | html! {<div class={sty.clone()}>{"Hello World!"}</div>}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| |
| the trait `From<StyleSource>` is not implemented for `Classes`
| required by a bound introduced by this call
|
= help: the following other types implement trait `From<T>`:
<Classes as From<Cow<'static, str>>>
<Classes as From<implicit_clone::unsync::string::IString>>
<Classes as From<Vec<T>>>
<Classes as From<String>>
<Classes as From<Option<T>>>
<Classes as From<[T; SIZE]>>
<Classes as From<&String>>
<Classes as From<&implicit_clone::unsync::string::IString>>
and 3 others
= note: required for `StyleSource` to implement `Into<Classes>`
For more information about this error, try `rustc --explain E0277`.
error: could not compile `new_prac_web` (lib) due to 1 previous error
My Cargo.toml file looks like this:
[package]
name = "new_prac_web"
version = "0.1.0"
edition = "2021"
[dependencies]
stylist = { version = "0.13.0", features = ["parser", "yew"] }
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
Despite following the Yew and stylist documentation, the code didn't compile successfully. I expected success, considering the documentation and examples demonstrated a similar usage of the styled_component macro. Could someone please help me understand what's causing it and how I can resolve it? Any insights or suggestions would be greatly appreciated.