Dioxus CSS-Stil ist bei Verwendung der Fullstack-Funktion nicht konsistent ⇐ CSS

[Anonymous]

Ich versuche, eine Navigationsleiste für meine Full-Stack-Webanwendung einzurichten, aber das CSS will nicht mitspielen.
Wenn ich die Anwendung zum ersten Mal lade (mit dxserve --web), ist der Stil völlig falsch, aber wenn ich in meiner IDE speichere, um einen Hot-Reload zu veranlassen (ich habe nichts geändert), wird der Stil aktualisiert und so korrigiert, wie er sein sollte.
Durch das Aktualisieren der Seite wird das CSS wieder zurückgesetzt zu einem Durcheinander und ich weiß nicht, wie ich das beheben kann. Ich gehe davon aus, dass es mit CSR/SSR zusammenhängt, weiß aber nicht, wo ich anfangen soll.
Dieses Problem tritt nur auf, wenn ich die Fullstack-Funktion aktiviere.
Wenn ich die Anwendung zum ersten Mal bereitstelle
Anfängliches CSS-Design (es sollte nicht so aussehen):


CSS-Styling, nachdem ich durch Speichern einen Hot-Reload veranlasst habe (ich habe nichts geändert). So sollte es aussehen:


So sieht mein main.rs aus

Code: Select all

use dioxus::prelude::*;
use crate::views::{navbar::Navbar, pagenotfound::PageNotFound, home::Home, favourites::Favourites, directory::Directory, login::Login};
use crate::functions::navbar_css::Page;

pub mod views;
pub mod functions;

const FAVICON: Asset = asset!("/assets/favicon.ico");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

static PAGE: GlobalSignal = Signal::global(|| None);

#[derive(Debug, Clone, Routable, PartialEq)]
enum Route {
#[layout(Navbar)]
#[route("/")]
Home {},
#[route("/directory")]
Directory {},
#[route("/favourites")]
Favourites {},
#[route("/login")]
Login {},
#[end_layout]
#[route("/:..route")]
PageNotFound {route: Vec}
}

fn main() {
dioxus::launch(App);
}

// app page
#[component]
fn App() -> Element {
rsx! {

document::Link { rel: "favicon", href: FAVICON}
document::Link { rel: "stylesheet", href: TAILWIND_CSS }

Router:: {}
}
}

So sieht meine Navigationsleiste aus:

Code: Select all

use dioxus::prelude::*;

use crate::{
functions::navbar_css::{page_select_css, Page},
Route,
};

const LOGO_LARGE_SVG: Asset = asset!("/assets/SVGs/logo_large.svg");
const LOGO_SMALL_SVG: Asset = asset!("/assets/SVGs/logo_small.svg");
const HOME_SVG: Asset = asset!("/assets/SVGs/home.svg");
const DIRECTORY_SVG: Asset = asset!("/assets/SVGs/directory.svg");
const FAVOURITES_SVG: Asset = asset!("/assets/SVGs/favourites.svg");
const LOGOUT_SVG: Asset = asset!("/assets/SVGs/logout.svg");

#[component]
pub fn Navbar() -> Element {
rsx! {
main {class: "flex relative grid grid-cols-8 bg-zinc-800",
body { class: "flex flex-col min-h-screen content-center col-span-8 mx-auto z-90",
nav { class: "sticky top-0 bg-zinc-200 z-99",
div { class: "flex content-normal text-nowrap border-b border-zinc-400",
div { class: "flex flex-1 text-center min-w-fit md:min-w-1/2 content-center items-center",
div {class: "p-1.5 m-1.5",
img {class: "hidden md:inline w-30", src: LOGO_LARGE_SVG}, img {class: "inline md:hidden w-5", src: LOGO_SMALL_SVG}
}
Link { class: page_select_css(Page::Home),
to: Route::Home {}, a {class:"hidden md:inline", "Home"} img {class: "inline md:hidden", src: HOME_SVG}
},
Link { class: page_select_css(Page::Directory),
to: Route::Directory {}, a {class:"hidden md:inline", "Directory"} img {class: "inline md:hidden", src: DIRECTORY_SVG}
},
Link { class: page_select_css(Page::Favourites),
to: Route::Favourites {}, a {class:"hidden md:inline", "Favourites"} img {class: "inline md:hidden", src: FAVOURITES_SVG}
},
}

div { class: "flex flex-1 grid grid-cols-4 text-center min-w-fit md:min-w-1/2 content-center",
div {class: "col-span-3"}
Link { class: page_select_css(Page::Login),
to: Route::Login {}, a {class:"hidden md:inline", "Login"} img {class: "inline md:hidden", src: LOGOUT_SVG}
},
}
}
}

div { class: "flex-1 bg-white",
Outlet:: {}
}
}
}
}
}