title: React Router Appears to Block Custom CSS
body: <p>I've been working on a React Bootstrap Navbar for my web app and have had some frustrations with styling it. Essentially, I am trying to set a custom background color for my navbar using custom CSS and classNames, but whether or not the color displays seems to depend on the route the user is visiting. </p>
  
  <p>The colors display as expected when I visit any 'primary' route (eg. <strong>/</strong>, <strong>/about</strong>, and <strong>/donate</strong> appear like <a href="https://i.stack.imgur.com/kDQO3.png" rel="nofollow noreferrer">this</a>). However, whenever I visit any 'secondary' routes, is seems like the CSS is just flat out ignored (for example <strong>/help/contact</strong> and <strong>/donate/methods</strong> appear like <a href="https://i.stack.imgur.com/D0HFJ.png" rel="nofollow noreferrer">this</a>). In all of the above examples, the base URL is localhost:3000. I am using React Router ('react-router-dom') to handle routing and React Bootstrap to create my navbar. </p>
  
  <p>To apply the custom background color, I simply added a className to the Navbar object:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>'../components/AppNavBar'
  
  &lt;Navbar variant="light" className=custom-color-1&gt;
    *Navbar contents*
  &lt;/Navbar&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and selected this class in a custom CSS file linked directly to index.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.custom-color-1 {
    background-color: #B3E5FC;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>These are the tests I ran that led me to this conclusion:</p>
  
  <ol>
  <li>Accessing the home page from '/' or '/ff' displays the navbar normally, but accessing the same page through '/ff/ff' causes the navbar to turn white.</li>
  <li>After creating two nearly identical, minimalistic pages, and routing one to '/test' and the other to '/test/route', the former displays normally and the latter turns white. The only difference between these two files are the file and export names. An example of one of these is provided below.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  
  import AppNavBar from '../components/AppNavBar';
  
  const TestPage1 = () =&gt; {
      return(
          &lt;&gt;
              &lt;AppNavBar /&gt;
              Sample text.
          &lt;/&gt;
      );
  };
  
  export default TestPage1;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Furthermore, when using Chrome DevTools, the DOM appears to be identical between the two pages. This is the part that baffles me the most. On the pages where the style applies appropriately, I can see my custom className appear in the 'styles' tab of the DevTools panel with the appropriate <strong>backgroundColor</strong> property. On the other pages, it disappears altogether! The <strong>only</strong> factor that seems to affect this behavior is the route that each page is mapped to. Is this a bug with React Router, or am I simply overlooking something?</p>
  
  <p>I ran a similar test with text colors on some pages. On the pages where the navbar styles properly, I am able to change the color of any text item (<strong>h3</strong>, <strong>p</strong>, etc.) using a className and custom CSS (using the <strong>color: #FAFAFA;</strong> property). On pages where the navbar does not style properly, I am unable to change text colors. Therefore, it does not appear to be an issue with the React Bootstrap Navbar.</p>
  
  <p>EDIT: Also noticed that I started getting "Resources interpreted as Stylesheet but transferred with MIME type text/html" errors for all of my custom stylesheets. A copy of my index.html file can be found in the <a href="https://codesandbox.io/s/reactroutercss-iwexj" rel="nofollow noreferrer">sandbox</a> I made, which reproduces my issue.</p>