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

[Anonymous]

Ich habe in den letzten Stunden meinen Kopf gegen die Wand geschlagen und habe beim besten Willen keine Ahnung, was diese Interaktion verursacht.
Ich versuche lediglich, 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 das Design völlig falsch, aber wenn ich in meiner IDE speichere, um einen Hot-Reload zu veranlassen (Ich habe nichts geändert), es aktualisiert und korrigiert den Stil so, wie er sein sollte.
Das Aktualisieren der Seite führt dann dazu, dass das CSS wieder durcheinander ist und ich weiß nicht, wie ich das beheben kann. Ich gehe davon aus, dass es mit CSR/SSR zu tun hat, weiß aber nicht, wo ich anfangen soll. Ich habe die Dokumentation durchgesehen, andere Fehlerberichte durchgesehen und nichts gefunden.
Ich habe mich sogar so tief gebeugt, dass ich AI (ew) um Hilfe gebeten habe!
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 veranlasse (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:: {}
}
}
}
}
}