title: razor page CSS is not working isolated, only with the style tag at the top
body: <p>The question is almost self-explanatory. I have the razor component &quot;board.razor&quot; and it also has a &quot;board.razor.css&quot; 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 &quot;board.razor&quot;, everything works like it should. I'll provide the code and the pictures for you.</p>
  <p>Board.razor with style tag at top:</p>
  <pre><code>&lt;style&gt;
  .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;
  }
  </code></pre>
  
  <pre><code>&lt;NavBar OnIssueCreated=&quot;LoadIssues&quot;&gt;&lt;/NavBar&gt;
   
  &lt;div class=&quot;bodyContainer&quot;&gt;
   
   
      @if (changeMenuShow)
      {
          &lt;h3 style=&quot;padding-left:5px&quot;&gt;&lt;b&gt;Aktive Sprints&lt;/b&gt;&lt;/h3&gt;
      }
   
      @*&lt;FilterBar AllIssues=&quot;issues&quot;&gt;&lt;/FilterBar&gt;*@
      &lt;div class=&quot;dropdown&quot;&gt;
          &lt;button class=&quot;btn btn-blue&quot; style=&quot; float: right; height: 38px; width: 41px; margin-left: 10px&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
              &lt;i class=&quot;oi oi-cog&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
              &lt;li class=&quot;dropdown-item&quot;&gt;&lt;a href=&quot;/boardsettings&quot; id=&quot;bsettings&quot;&gt;Board Einstellungen(unfertig)&lt;/a&gt;&lt;/li&gt;
              @*&lt;li class=&quot;dropdown-item&quot; @onclick=&quot;ModalShow&quot;&gt;Board erstellen&lt;/li&gt;*@
              @if (changeMenuShow)
              {
                  &lt;li class=&quot;dropdown-item&quot; @onclick=&quot;MenuShow&quot;&gt;Menüs ausblenden&lt;/li&gt;
              }
              else if (!changeMenuShow)
              {
                  &lt;li class=&quot;dropdown-item&quot; @onclick=&quot;MenuShow&quot;&gt;Menüs einblenden&lt;/li&gt;
              }
   
              @if (dialogType.Equals(EditDialogType.Sidebar))
              {
                  &lt;li class=&quot;dropdown-item&quot; @onclick=&quot;DialogToModal&quot;&gt;Vorgänge im Dialogfeld öffnen&lt;/li&gt;
              }
              else if (dialogType.Equals(EditDialogType.Modal))
              {
                  &lt;li class=&quot;dropdown-item&quot; @onclick=&quot;DialogToSidebar&quot;&gt;Vorgänge in der Seitenleiste öffnen&lt;/li&gt;
              }
          &lt;/ul&gt;
      &lt;/div&gt;
      @if (activeSprint != null)
      {
          &lt;div style=&quot;float: right; margin-left: 10px &quot;&gt;
              &lt;button style=&quot;height: 38px;&quot; class=&quot;btn btn-blue&quot; @onclick=&quot;Complete&quot;&gt;Sprint abschließen&lt;/button&gt;
          &lt;/div&gt;
      }
   
   
      &lt;div class=&quot;custom-control custom-switch&quot; style=&quot;display: inline; float: left; margin-top: 8px; margin-left: 10px&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; id=&quot;addMorebox&quot; @bind=&quot;ShowOpenForToday&quot; /&gt;
          &lt;label class=&quot;custom-control-label&quot; for=&quot;addMorebox&quot;&gt;Heute zu erledigen anzeigen&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;custom-control custom-switch&quot; style=&quot;display: inline; float: left; margin-top:8px; margin-left: 10px;&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; id=&quot;addWaitReply&quot; @bind=&quot;showWaitForReply&quot; /&gt;
          &lt;label class=&quot;custom-control-label&quot; for=&quot;addWaitReply&quot;&gt;Warte auf Rückmeldung anzeigen&lt;/label&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;IssueDialogOpener DialogType=&quot;dialogType&quot;&gt;
          &lt;div class=&quot;scrollbar&quot; style=&quot;height: 70vh; &quot;&gt;
              &lt;header class=&quot;status-header&quot;&gt;
                  &lt;div class=&quot;status-header-item&quot;&gt;Zu Erledigen&lt;/div&gt;
                  @if (ShowOpenForToday)
                  {
                      &lt;div class=&quot;status-header-item&quot;&gt;Heute zu Erledigen&lt;/div&gt;
                  }
                  @if (showWaitForReply)
                  {
                      &lt;div class=&quot;status-header-item&quot; style=&quot;display: inline;&quot;&gt;Warte auf Rückmeldung&lt;/div&gt;
                  }
                  &lt;div class=&quot;status-header-item&quot;&gt;In Arbeit&lt;/div&gt;
                  &lt;div class=&quot;status-header-item&quot;&gt;Fertig&lt;/div&gt;
              &lt;/header&gt;
              &lt;div&gt;
                  @if (parentIssues.Count &gt; 0)
                  {
                      @foreach (var issue in parentIssues)
                      {
                          &lt;SubtaskStatusContainer Issue=&quot;issue&quot; ShowOpenForToday=&quot;@ShowOpenForToday&quot; showWaitForReply=&quot;@showWaitForReply&quot; OnChange=&quot;LoadIssues&quot;&gt;&lt;/SubtaskStatusContainer&gt;
                      }
                      @if (issues.Count != 0)
                      {
                          &lt;StatusContainer Issues=&quot;@issues&quot; ShowOpenForToday=&quot;@ShowOpenForToday&quot; showWaitForReply=&quot;@showWaitForReply&quot; OnChange=&quot;LoadIssues&quot;&gt;&lt;/StatusContainer&gt;
                      }
                  }
                  else if (issues.Count != 0)
                  {
                      &lt;StatusContainer IsWithoutSubtasks=true Issues=&quot;@issues&quot; ShowOpenForToday=&quot;@ShowOpenForToday&quot; showWaitForReply=&quot;@showWaitForReply&quot; OnChange=&quot;LoadIssues&quot;&gt;&lt;/StatusContainer&gt;
                  }
   
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/IssueDialogOpener&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How it looks:</p>
  <p><a href="https://i.stack.imgur.com/mvEON.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mvEON.png" alt="" /></a></p>
  <p>How it looks with styles isolated in the board.razor.css:
  <a href="https://i.stack.imgur.com/BsXG5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BsXG5.png" alt="enter image description here" /></a></p>