C#•12mo ago

Blazor css not applied

Hi,

i have a component css file for my blazor component where i have definied

.preview-container .markdown-body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.8;
    padding: 1.5rem;
    background-color: #ffffff;
    color: #2c3e50;
}

/* Headings */
.preview-container .markdown-body h1 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-size: 2.5rem !important;
    color: #2a9d8f !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 0.5rem !important;
}

.preview-container .markdown-body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.8;
    padding: 1.5rem;
    background-color: #ffffff;
    color: #2c3e50;
}

/* Headings */
.preview-container .markdown-body h1 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-size: 2.5rem !important;
    color: #2a9d8f !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 0.5rem !important;
}

However, when I look at the rendered html in the browser, i see the h1 is not 2.5rem and got overwritten by user agent stylesheet. What is that? I also noticed that the first css is applied but the second one is not. How does that come? How can I fix that?
I attached a screenshot of the DevTools so you can see the html and css.

No replies yetBe the first to reply to this messageJoin