Getting css working in my first Dioxus project

[strange juniper]

use dioxus::{prelude::*};

const MAIN_CSS: Asset = asset!("/assets/main.css");

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

#[component]
fn App() -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        Menu {}

    }
}

#[component]
pub fn Menu() -> Element {
    rsx! {
        button { id: "push" }
    }
}

body {
    background: red !important;
}```

What the app looks like: which also seems wrong.

the layout:

[sage sandal]

Are you running with dx serve?

Does your Dioxus CLI version match your Dioxus version?

[strange juniper]

yep

[strange juniper]

no

that fixed it

thank you

[sage sandal]

Excellent. We're hoping to make it less picky in future, but atm even the patch version should match.

[strange juniper]

ahh I see

I have another question, do you understand why my border is doing this?

you see how its 50% black, 50% grey. Why is the border not all grey.

body {
    background: #fafafa;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
}

#menu {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.button {
    padding: 12px 28px;
    font-size: 18px;
    font-weight: 600;

    color: #181818;
    background-color: #ffffff;

    border-radius: 16px;
    border: 2px solid #dddddd;

    cursor: pointer;
    appearance: none;
    pointer-events: auto;

    transition:
        background-color 0.15s ease,
}

.button:hover {
    background-color: #2463eb;
}

use dioxus::{prelude::*};

const MAIN_CSS: Asset = asset!("/assets/main.css");

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

#[component]
fn App() -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        Menu {}
    }
}

#[component]
pub fn Menu() -> Element {
    rsx! {
        div { 
            id: "menu",
            button { class: "button", "Push" }
        }
    }
}

[sage sandal]

Not sure. Could be the <button> element's default styling not being overriden entirely.

Does it happen with <div>?

[strange juniper]

I just closed and relaunched dx serve and it fixed

I'm quite confused on how this dx serve works

[spark marsh]

can you post your dioxus.toml?

[strange juniper]

sure

[application]

[web.app]

# HTML title tag content
title = "test"

# include `assets` in web platform
[web.resource]

# Additional CSS style files
style = []

# Additional JavaScript files
script = []

[web.resource.dev]

# Javascript code file
# serve: [dev-server] only
script = []```

[sage sandal]

It has a hot reloading mechanism. But you should probably treat that as not 100% reliable.

[spark marsh]

I think you should explicitly define a public dir

or wait no that's another issue

[strange juniper]

I see, thank you

[strange juniper]

well I managed to fix the issue i had now