Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex custom style attributes lost after navigating in ssr mode #344

Open
jerhat opened this issue Dec 17, 2024 · 2 comments
Open

Flex custom style attributes lost after navigating in ssr mode #344

jerhat opened this issue Dec 17, 2024 · 2 comments
Labels
documentation Improvements or additions to documentation

Comments

@jerhat
Copy link
Contributor

jerhat commented Dec 17, 2024

Custom style prop of Flex gets appended to the resulting Html correctly on first render. However after client side navigation in ssr mode, Flex's default style properties are lost.

E.g. given the below Flex definition:

<Flex vertical=true align=FlexAlign::End attr:style="color: red" >"Some red text" </Flex>

The following div is generated on the first render:

<div class="thaw-flex" style="display: flex;flex-direction: column;gap: 8px 12px;align-items: end;;color: red;">Some red text</div>

This is expected.

However when navigating away and then back to the same component, the following div is generated:

<div style="color: red" class="thaw-flex">Some red text</div>

Notice the display, flex-firection, ... properties are gone. I am expecting the same Html as for the first render.

Minimal reproducible example below. On initial load Some red text is right-aligned as expected. After navigating to /pageblue and back, the red text is left-aligned.

Is this a bug or are my expectations incorrect?

use components::{Route, Router, Routes};
use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags};
use leptos_router::StaticSegment;
use leptos_router::*;
use thaw::*;

pub fn shell(options: LeptosOptions) -> impl IntoView {
    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <AutoReload options=options.clone() />
                <HydrationScripts options/>
                <MetaTags/>
            </head>
            <body>
                <App/>
            </body>
        </html>
    }
}

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {

        <Router>
            <nav>
                <Link href="/">"Page Red"</Link>
                <Link href="/pageblue">"Page Blue"</Link>
                <br/ >
            </nav>
            <main>
                <Routes fallback=|| "Page not found.".into_view()>
                    <Route path=StaticSegment("/") view=PageRed />
                    <Route path=StaticSegment("/pageblue") view=PageBlue />
                </Routes>
            </main>
        </Router>
    }
}

#[component]
fn PageRed() -> impl IntoView {
    view! {
        <Flex vertical=true align=FlexAlign::End attr:style="color: red">
            "Some red text"
        </Flex>
    }
}

#[component]
fn PageBlue() -> impl IntoView {
    view! {
        <div style="display: flex;flex-direction: column;align-items: end;color: blue;">
            "Some blue text"
        </div>
    }
}

Relevant sections of Cargo.toml:

[dependencies]
leptos = { version = "0.7.0" }
leptos_router = { version = "0.7.0" }
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
leptos_axum = { version = "0.7.0", optional = true }
leptos_meta = { version = "0.7.0" }
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.99"
thiserror = "1"
http = "1"
thaw = { version = "0.4.0-rc" }

[features]
hydrate = ["leptos/hydrate", "thaw/hydrate"]
ssr = [
    "dep:axum",
    "dep:tokio",
    "dep:tower",
    "dep:tower-http",
    "dep:leptos_axum",
    "leptos/ssr",
    "leptos_meta/ssr",
    "leptos_router/ssr",
    "thaw/ssr",
]
@luoxiaozero
Copy link
Collaborator

attr:style="color: red" is changed to style="color: red".

attr:style will override the style of the div, so I provide a style prop for the Flex component.

@luoxiaozero luoxiaozero added the documentation Improvements or additions to documentation label Dec 17, 2024
@jerhat
Copy link
Contributor Author

jerhat commented Dec 18, 2024

Thank you, I overlooked the style prop of Flex. Using it instead of attr:style solves my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jerhat @luoxiaozero