title: react route how to import local scss file only apply to one js file?
body: <p>In one React app with React Router, for each route component, I would like to have one local scss file only apply to this file.</p>
  
  <p>For below example, about.js imported about.scss, <strong>what I want to have is: about.scss override the global style in app.scss only in about.js. However, it overrode everything in the app</strong></p>
  
  <p><strong>app.js - imported app.scss which I prefer as a global style</strong></p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  import "./app.scss";  // global scss
  import About from "./about";
  
  export default function App() {
    return (
      &lt;&gt;
        &lt;h1&gt;question about scss in react route&lt;/h1&gt;
        &lt;Router&gt;
          &lt;div&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;Link to="/"&gt;Home&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to="/about"&gt;About&lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;hr /&gt;
            &lt;Route exact path="/" component={Home} /&gt;
            &lt;Route path="/about" component={About} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/&gt;
    );
  }
  function Home() {
    return (
      &lt;div&gt;
        &lt;h3 className={"myMargin"}&gt;home&lt;/h3&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>app.scss (the global style)</strong></p>
  
  <pre><code>h3.myMargin {
    margin: 10px
  }
  </code></pre>
  
  <p><strong>about.js</strong></p>
  
  <pre><code>import React from "react";
  import "./about.scss";
  
  export default function About() {
    return (
      &lt;div&gt;
        &lt;h3 className={"myMargin"}&gt;About&lt;/h3&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>about.scss (I want to be a local style, however, it applied to everywhere in the app)</strong></p>
  
  <pre><code>h3.myMargin {
    margin: 100px
  }
  </code></pre>
  
  <p>Any suggestion how to structure my style code?</p>