title: Change style of a child component using parent class from parent component's style file
body: <p>I have <code>TrackCard</code> component defined as:</p>
  
  <pre><code>&lt;React.Fragment&gt;
    {this.props.items.map((item, index) =&gt; (
      &lt;div className={classes['genre-col']} key={index}&gt; //&lt;--------
        &lt;div className={classes['track-single']}&gt;
          &lt;div className={classes['track-img-container']}&gt;
            &lt;img src={item.url} alt="" className={classes['track-image']} /&gt;
          &lt;/div&gt;
          &lt;div className={classes.genre}&gt;
            &lt;h6&gt;{item.name}&lt;/h6&gt;
            &lt;p&gt;{item.artist}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ))}
  &lt;/React.Fragment&gt;
  </code></pre>
  
  <p>The <code>genre-col</code> class is defined in <code>Music.scss</code></p>
  
  <pre><code>.genre-col {
      width: 20%;
  }
  </code></pre>
  
  <p>Now I am accessing the <code>TrackCard</code> Component in another Component named <code>Feeds</code> as follows  and the styles are defined in <code>Feeds.scss</code> :</p>
  
  <pre><code>&lt;div className={`${classes['feed-cover']}`}&gt;
      &lt;TrackCard  items={this.state.tracks}/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But here I need to change the width of the <code>.genre-col</code> without affecting other components. So I need to access <code>.genre-col</code> using the parent class in <code>Feeds</code> Component and define it in <code>Feeds.scss</code>.</p>
  
  <p>I tried to import the style files in both the components and define the class globally. But there was no result.<br>
  I use SCSS modules for styling.</p>