title: How to use joint selectors in styled-component
body: <p>I have legacy CSS which looks like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.btn_1 {
      color: #fff;
      background: #004dda;
      display: inline-block;
  }
  .btn_1:hover {
    background-color: #FFC107;
    color: #222 !important;
  }
  .btn_1.full-width {
    display: block;
    width: 100%;
  }
  </code></pre>
  
  <p>I want to migrate to using styled-components (CSS-in-JS style) in React.</p>
  
  <p>This is my migration so far:</p>
  
  <pre class="lang-css prettyprint-override"><code>.btn_1 {
      color: #fff;
      background: #004dda;
      display: inline-block;
      :hover {
          background-color: #FFC107;
          color: #222 !important;
      }
  }
  </code></pre>
  
  <p>but is there any solution in styled-components for selectors like <code>.btn_1.full-width</code> or I should just create another CSS block for that?</p>
  
  <hr>
  
  <p>I think it would be cool to do something like this (or better):</p>
  
  <pre class="lang-css prettyprint-override"><code>.btn_1 {
      ${this}.full-width {
          display: block;
          width: 100%;
     }
  }
  
  </code></pre>
  
  <p>but I can't seem to find the solution in the documents. Do you have any idea how this is possible or is this even a good idea?</p>