title: Blazor <NavLink> style stops working when included as component
body: <p>To reproduce this issue, I created a MenuItemComponent</p>
  <pre><code>&lt;li class=&quot;nav-item px-3&quot;&gt;
      &lt;NavLink class=&quot;nav-link&quot; href=&quot;fetchdata&quot;&gt;
          &lt;span class=&quot;oi oi-list-rich&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Fetch data
      &lt;/NavLink&gt;
  &lt;/li&gt;
  </code></pre>
  <p>and then included the component to the NavMenu file</p>
  <pre><code>&lt;div class=&quot;top-row pl-4 navbar navbar-dark&quot;&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;&quot;&gt;Porcellus&lt;/a&gt;
      &lt;button class=&quot;navbar-toggler&quot; @onclick=&quot;ToggleNavMenu&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;@NavMenuCssClass&quot; @onclick=&quot;ToggleNavMenu&quot;&gt;
      &lt;ul class=&quot;nav flex-column&quot;&gt;
          &lt;li class=&quot;nav-item px-3&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;&quot; Match=&quot;NavLinkMatch.All&quot;&gt;
                  &lt;span class=&quot;oi oi-home&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Home
              &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item px-3&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;counter&quot;&gt;
                  &lt;span class=&quot;oi oi-plus&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Counter
              &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item px-3&quot;&gt;
              &lt;NavLink class=&quot;nav-link&quot; href=&quot;fetchdata&quot;&gt;
                  &lt;span class=&quot;oi oi-list-rich&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Fetch data
              &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;MenuItemComponent&gt;&lt;/MenuItemComponent&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  @code {
      private bool collapseNavMenu = true;
  
      private string NavMenuCssClass =&gt; collapseNavMenu ? &quot;collapse&quot; : null;
  
      private void ToggleNavMenu()
      {
          collapseNavMenu = !collapseNavMenu;
      }
  }
  </code></pre>
  <p>And then the output is
  <a href="https://i.stack.imgur.com/0bvMm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0bvMm.png" alt="enter image description here" /></a></p>
  <p>I don't think this issue exists in asp.net core 3.1</p>
  <p>It seems that if I wrap contents into a component the css styles will stop working.</p>
  <p>But when I upgraded to .net 5 this issue starts showing destroying the templates I made earlier</p>
  <p>What is the cause of this and is there a way to fix this?</p>
  <p>Thanks!</p>