razor 页面 CSS 不能单独工作，只能在顶部使用样式标签

Question

这个问题几乎是不言自明的。我有 razor 组件“board.razor”，它还有一个“board.razor.css”，其中包含该页面的所有样式。如果我这样做，那么样式将不会被应用。如果我在“board.razor”的顶部插入样式类，一切都会正常工作。我将为您提供代码和图片。

\n

Board.razor 顶部带有样式标签：

\n

<style>\n.dropzone {\n    padding: 10px;\n    background: #e2eaf2;\n    list-style: none;\n    height: 100%;\n    min-width: 50%;\n}\n\n.no-drop {\n    border: 2px dashed red;\n    background-color: #e6d8d8;\n}\n\n.can-drop {\n    border: 2px dashed green;\n    background-color: #d8e6d8;\n}\n\n.draggable {\n    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);\n    margin-bottom: -8px;\n    padding: 10px;\n    cursor: move;\n    background: #fff;\n    color: #000;\n    border-radius: 3px;\n    max-width: 500px;\n}\n\n    .draggable:active {\n        cursor: move;\n        background: #f1f8ff;\n    }\n\n    .draggable:hover {\n        cursor: move;\n        background: #f1f8ff;\n    }\n\nh6 {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 0;\n}\n\n.dragging {\n    cursor: move;\n}\n\n.description {\n    font-size: 14px;\n}\n\n.sum {\n    font-size: 17px;\n    word-wrap: break-word;\n    color: midnightblue;\n    font-weight: bold;\n}\n\n.last-updated {\n    margin-bottom: 0;\n    font-size: 11px;\n    color: #474747;\n    font-weight: bold;\n}\n\n    .last-updated small {\n        text-transform: uppercase;\n        color: #474747;\n        font-size: 11px;\n    }\n\nh6 {\n    width: 100%;\n    height: auto;\n}\n\n.scrollbar {\n    top: 0;\n    bottom: 0;\n    overflow: hidden;\n    overflow-y: auto;\n}\n\n.status-details[open] {\n    transition: height 3s;\n}\n\n.status-details-summary {\n    padding: 1px 0px 1px 8px;\n    position: sticky;\n    top: 3rem;\n    bottom: 0;\n    z-index: 20;\n    font-size: 12px;\n    background-color: white;\n}\n\n.status-container {\n    display: flex;\n}\n\n.status-list {\n    display: flex;\n    flex-direction: column;\n    padding: 5px;\n    width: 100%;\n}\n\n.status-header {\n    display: flex;\n    position: sticky;\n    top: 0;\n    background-color: white;\n    z-index: 21;\n}\n\n.status-header-item {\n    font-weight: bold;\n    margin: 5px;\n    margin-bottom: -5px;\n    padding: 10px;\n    background: #e2eaf2;\n    flex-direction: column;\n    display: flex;\n    width: 100%;\n}\n\n#bsettings {\n    text-decoration: none;\n    color: inherit;\n    cursor: default;\n    display: block;\n}\n

\n\n

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

\n

外观如何：

\n

\n

在 board.razor.css 中隔离的样式的外观如何：\n

\n

Answer 1

要使独立 css 文件中的 CSS 在子组件中工作，您需要使用::deep运算符。 文档管理系统