title: How to overwrite the vue-bootstrap styles in b-modal
body: <p>I tried to change the background-color in b-modal -> in .modal-header using <code>bootstrap-vue</code>. But the vue doesn't see my styles and I don know why :/
  here is the code. I follow by answer in <a href="https://stackoverflow.com/questions/49989845/bootstrap-vue-change-the-position-of-b-modal">link</a></p>
  
  <p>HTML:</p>
  
  <pre><code>b-modal(id="card-1" title="CARTÃO DE CRÉDITO"  :modal-class="myclass" header-text-variant="light")
  </code></pre>
  
  <p>VUE</p>
  
  <pre><code>export default {
      data: {
     myclass: ['myclass']
   },
  </code></pre>
  
  <p>}</p>
  
  <p>CSS</p>
  
  <pre><code>.myclass &gt; .modal-dialog &gt; .modal-content &gt; .modal-header {
    background-color: #da2228 !important;
    color: white;
  }
  </code></pre>
  
  <p>But I still doesn't see the results. Modal header is white. Any ideas why?</p>