razor page CSS is not working isolated, only with the style tag at the top

Question

The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.

Board.razor with style tag at top:

<style>
.dropzone {
    padding: 10px;
    background: #e2eaf2;
    list-style: none;
    height: 100%;
    min-width: 50%;
}

.no-drop {
    border: 2px dashed red;
    background-color: #e6d8d8;
}

.can-drop {
    border: 2px dashed green;
    background-color: #d8e6d8;
}

.draggable {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: -8px;
    padding: 10px;
    cursor: move;
    background: #fff;
    color: #000;
    border-radius: 3px;
    max-width: 500px;
}

    .draggable:active {
        cursor: move;
        background: #f1f8ff;
    }

    .draggable:hover {
        cursor: move;
        background: #f1f8ff;
    }

h6 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.dragging {
    cursor: move;
}

.description {
    font-size: 14px;
}

.sum {
    font-size: 17px;
    word-wrap: break-word;
    color: midnightblue;
    font-weight: bold;
}

.last-updated {
    margin-bottom: 0;
    font-size: 11px;
    color: #474747;
    font-weight: bold;
}

    .last-updated small {
        text-transform: uppercase;
        color: #474747;
        font-size: 11px;
    }

h6 {
    width: 100%;
    height: auto;
}

.scrollbar {
    top: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
}

.status-details[open] {
    transition: height 3s;
}

.status-details-summary {
    padding: 1px 0px 1px 8px;
    position: sticky;
    top: 3rem;
    bottom: 0;
    z-index: 20;
    font-size: 12px;
    background-color: white;
}

.status-container {
    display: flex;
}

.status-list {
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 100%;
}

.status-header {
    display: flex;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 21;
}

.status-header-item {
    font-weight: bold;
    margin: 5px;
    margin-bottom: -5px;
    padding: 10px;
    background: #e2eaf2;
    flex-direction: column;
    display: flex;
    width: 100%;
}

#bsettings {
    text-decoration: none;
    color: inherit;
    cursor: default;
    display: block;
}

<NavBar OnIssueCreated="LoadIssues"></NavBar>
 
<div class="bodyContainer">
 
 
    @if (changeMenuShow)
    {
        <h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
    }
 
    @*<FilterBar AllIssues="issues"></FilterBar>*@
    <div class="dropdown">
        <button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="oi oi-cog"></i>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li class="dropdown-item"><a href="/boardsettings" id="bsettings">Board Einstellungen(unfertig)</a></li>
            @*<li class="dropdown-item" @onclick="ModalShow">Board erstellen</li>*@
            @if (changeMenuShow)
            {
                <li class="dropdown-item" @onclick="MenuShow">Menüs ausblenden</li>
            }
            else if (!changeMenuShow)
            {
                <li class="dropdown-item" @onclick="MenuShow">Menüs einblenden</li>
            }
 
            @if (dialogType.Equals(EditDialogType.Sidebar))
            {
                <li class="dropdown-item" @onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
            }
            else if (dialogType.Equals(EditDialogType.Modal))
            {
                <li class="dropdown-item" @onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
            }
        </ul>
    </div>
    @if (activeSprint != null)
    {
        <div style="float: right; margin-left: 10px ">
            <button style="height: 38px;" class="btn btn-blue" @onclick="Complete">Sprint abschließen</button>
        </div>
    }
 
 
    <div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
        <input type="checkbox" class="custom-control-input" id="addMorebox" @bind="ShowOpenForToday" />
        <label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
    </div>
    <div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
        <input type="checkbox" class="custom-control-input" id="addWaitReply" @bind="showWaitForReply" />
        <label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
    </div>
    <br />
    <br />
    <br />
    <IssueDialogOpener DialogType="dialogType">
        <div class="scrollbar" style="height: 70vh; ">
            <header class="status-header">
                <div class="status-header-item">Zu Erledigen</div>
                @if (ShowOpenForToday)
                {
                    <div class="status-header-item">Heute zu Erledigen</div>
                }
                @if (showWaitForReply)
                {
                    <div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
                }
                <div class="status-header-item">In Arbeit</div>
                <div class="status-header-item">Fertig</div>
            </header>
            <div>
                @if (parentIssues.Count > 0)
                {
                    @foreach (var issue in parentIssues)
                    {
                        <SubtaskStatusContainer Issue="issue" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
                    }
                    @if (issues.Count != 0)
                    {
                        <StatusContainer Issues="@issues" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></StatusContainer>
                    }
                }
                else if (issues.Count != 0)
                {
                    <StatusContainer IsWithoutSubtasks=true Issues="@issues" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></StatusContainer>
                }
 
            </div>
        </div>
    </IssueDialogOpener>
</div>

How it looks:

How it looks with styles isolated in the board.razor.css:

Answer 1

For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS

Answer 2

Push all styles back to Board.razor.css file

If your application is server-side then make sure if you have this line in your _Layout.cshtml

And if your application is Web Assembly then make sure this line is in your index.html file

<head>
    <link href="yourprojectname.styles.css" rel="stylesheet" />
</head>