title: How to change the style of a shared module in the modules that are sharing it?
body: <p>I have three modules A, B and C.</p>
  <p>The module A is being shared by B and C.</p>
  <p>The module A is using global CSS from app.component.css which is like</p>
  <pre><code> .section-top-padding {
        padding-top: 11.25rem;
        padding-bottom: 4.0625rem;
      }
  </code></pre>
  <p>The html of module B is:</p>
  <pre><code>&lt;app-module-A&gt;&lt;/app-module-A&gt;
  </code></pre>
  <p>The html of module C is:</p>
  <pre><code>&lt;app-module-A&gt;&lt;/app-module-A&gt;
  </code></pre>
  <p>I want to change the css style in module B</p>
  <pre><code>.section-top-padding {
        padding-top: 10px;
        padding-bottom: 5rem;
      }
  </code></pre>
  <p>Similarly I want the style in module C like</p>
  <pre><code>.section-top-padding {
        padding-top: 0px;
        padding-bottom: 4.0625rem;
      }
  </code></pre>
  <p>I have tried to change the css by using individual css of module B and C. But it is not working. How can I achieve that If I don't want to change the global CSS as it is being used by other modules also.</p>