title: How to change the background color of react-bootstrap's switch (part of the Forms component) using Emotion
body: <p>How do you update the default blue background color of the <a href="https://react-bootstrap.github.io/components/forms/#forms-custom-switch" rel="nofollow noreferrer">switch found in react-bootstrap</a> (not react-bootstrap-switch) using Emotion?</p>
  
  <p>When I go into Chrome's devtools I'm able to make the change but can't seem to get it right on the React side.</p>
  
  <p><strong>from devtools</strong></p>
  
  <p><a href="https://i.stack.imgur.com/msjXw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/msjXw.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/EngI1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EngI1.png" alt="enter image description here"></a></p>
  
  <p><strong>my attempt</strong></p>
  
  <pre><code>&lt;Form&gt;
    &lt;Form.Switch
      id="custom-switch"
      label="text goes here"
      bsCustomPrefix={`custom-control-input:checked~custom-control-label::before ${css`background: red;`}`}
    /&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>I've also tried using <code>className</code> in lieu of <code>bsCustomPrefix</code>. </p>
  
  <p><strong>what actually happens</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XOscx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XOscx.png" alt="enter image description here"></a></p>
  
  <p>the entire item gets altered. </p>