title: How to extend/customize a bootstrap's class' descendants using SASS?
body: <p>I want to create a custom table style by extending existing bootstrap style. The thing is, I only want to customize a specific descendant of the style. i.e., I want to make the header sticky by extending the <code>th</code> descendant selector's style by <code>position: 'sticky'; top: 0;</code>.</p>
  <p>To this end, I added the following in the <code>custom.scss</code> file:</p>
  <pre><code>@import '~bootstrap/scss/bootstrap';
  
  .my-custom-table {
    @extend .table-striped;
    @extend .table-bordered;
    th {
      position: 'sticky';
      top: 0;
    }
  }
  </code></pre>
  <p>when I use that class in the rendering logic like below :</p>
  <p><code>&lt;Table className='my-custom-table'/&gt;</code></p>
  <p>The <strong>header isn't sticky</strong>. Note that if I use the style in each of the <code>th</code> cells, it works as expected.</p>
  <p>Any help with where I have gone wrong is appreciated.</p>