Yew.rs框架中style!标签在函数/类组件中失效问题求助

问题根源 #

你使用的Yew 0.20.0和yew-style-in-rs 0.4.1版本不兼容。Yew 0.20对Classes类型做了变更，而yew-style-in-rs 0.4.1仅适配Yew 0.19，因此StyleId无法自动转换为Classes，触发E0277 trait绑定错误。

解决方案 #

方案1：升级yew-style-in-rs到兼容Yew 0.20的版本 #

修改Cargo.toml中的依赖版本，将yew-style-in-rs升级到支持Yew 0.20的版本（0.5.0及以上）：

yew-style-in-rs = "0.5.0"

升级后原示例代码无需修改即可正常编译。

方案2：降级Yew到0.19版本 #

如果暂时无法升级样式库，可将Yew降级到0.19版本，适配yew-style-in-rs 0.4.1：

yew = { version = "0.19.3", features = ["csr"] }
yew-router = "0.16.0"

注意同步降级相关依赖（如yew-router），避免版本冲突。

方案3：临时手动转换（无需修改依赖版本） #

通过将StyleId转换为字符串类型，再传入classes!宏：

use yew::prelude::*;
use yew_style_in_rs::*;

#[function_component]
pub fn Mdpages() -> Html {
    style! {
        let css = css! {r#"
            border: solid green 1px;
            width: 100%;
            height: 150px;
            text-align: center;
            box-sizing: border-box;

            & > p {
                background: white;
            }
        "#};
    }
    html!{
        <div class={classes!(css.to_string())}>
            <p>{"compile time static css"}</p>
        </div>
    }
}

调用to_string()方法将StyleId转为字符串，即可满足Classes的类型要求。

内容的提问来源于stack exchange，提问作者yosemeti