title: React emotion styled not working but normal css was working fine for input and label styles
body: <p>Everything is working except this piece which I have tried many different ways...</p>
  <pre><code>    const HiddenInput = styled.input`
      display: none;
      &amp;:checked + CheckboxLabel: {
          background-color: #866dce;
      },
  `
  </code></pre>
  <p>The checked should change color but it doesn't. I also tried using .checkbox-label where classname='checkbox-label&quot; but no luck</p>
  <p>Here is the relevant code...</p>
  <pre><code>const CheckboxLabel = styled.label`
      background-color: rgb(211, 106, 106);
      cursor: pointer;
      font-size: 20;
      text-align: center;
      display: flex;
      justify-content: center;
      margin-right: 10px;
      padding: 5px;
      border-radius: 5px;
  `
  const HiddenInput = styled.input`
      display: none;
      &amp;:checked + .checkbox-label: {
          background-color: #866dce;
      }
  `
  
  &lt;HiddenInput type=&quot;checkbox&quot; id={&quot;toggle&quot;+index} onChange={() =&gt; handleChecked(item)} key={&quot;input&quot; + index} /&gt;
  &lt;CheckboxLabel htmlFor={&quot;toggle&quot;+index} className=&quot;checkbox-label&quot; key={&quot;label&quot; + index}&gt;{item}&lt;/CheckboxLabel&gt;&lt;br /&gt;
  </code></pre>