title: Is it possible to style a checkbox's child based on the checkbox's state without using ternary in Styled Components?
body: <p>I'm trying to style this component with Styled Components, but my solution seems hackish. What is the best practice for styling this component with Styled Components? </p>
  
  <p>Using Plain HTML and CSS, and I can create this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label&gt;
    &lt;input type="checkbox" value="s1"/&gt;
    &lt;div class="container"&gt;s1&lt;/div&gt;
  &lt;/label&gt;
  &lt;label&gt;
    &lt;input type="checkbox" value="s2"/&gt;
    &lt;div class="container"&gt;s2&lt;/div&gt;
  &lt;/label&gt;
  &lt;label&gt;
    &lt;input type="checkbox" value="s3"/&gt;
    &lt;div class="container"&gt;s3&lt;/div&gt;
  &lt;/label&gt;
  &lt;label&gt;
    &lt;input type="checkbox" value="s4"/&gt;
    &lt;div class="container"&gt;s4&lt;/div&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input[type=checkbox] {
    position: absolute;
    width: 0;    
  }
  
  .container {
    width: 5em;
    border: solid #aaa 1px;
    background: #fff
    color: #000;
  }
  .container:hover {
    background: #999;
  }  
  
  .container:active {
    background: #333;
    color:#fff
  }
  
  input[type=checkbox]:checked + .container {   
    background: #000;
    color: #fff;
  }    
  
  input[type=checkbox]:checked + .container:hover {
    background: #ddd;
  }  
  
  input[type=checkbox]:checked + .container:hover:active {
    background: white;
    color: black;
  }  
  </code></pre>
  
  <p>Using a React component and Styled Components, I can also create it, but I don't like using two different Styled Components and the ternary to accomplish what I could in CSS using <code>input[type=checkbox]:checked + .container</code>.</p>
  
  <pre><code>import React, { useState } from 'react';
  import styled from 'styled-components'
  
  function Test() {
    const [selectedStations, setSelectedStations] = useState([]);  
  
    const Input = styled.input`
      position: absolute;
      width: 0;    
    ` 
    const UncheckedContainer = styled.div` 
      width: 5em;    
      border: solid #aaa 1px;
      background: #fff;
      color: #000;
  
    &amp;:hover {
      background: #999;
    }  
  
    &amp;:active {
        background: #333;
        color: #fff;
    }
    `
    const CheckedContainer = styled.div`
      width: 5em;
      border: solid black 1px;
      background: #000;
      color: #fff;
  
    &amp;:hover {
      background: #ddd;
    }  
  
    &amp;:active {
        background: #fff;
        color: #000;
    }  
    `
  
    function selectStations(e) {    
      let station = e.target.value;
      const s = [...selectedStations]
      const stationIndex = s.indexOf(station)
  
      if (stationIndex &gt; -1) {
        s.splice(stationIndex, 1);
      } else {
        s.push(station);
        s.sort();
      }
  
      setSelectedStations(s)
    };
  
  
    return (
      &lt;div&gt;
          {new Array(4).fill('').map((v, i) =&gt;{
  
            let checked = selectedStations.indexOf(`s${i+1}`) &gt; -1         
  
            return(
              &lt;label key={`station${i + 1}`}&gt;
              &lt;Input              
                type="checkbox"
                value={`s${i+1}`}
                checked={checked}
                onChange={(e)=&gt;selectStations(e)}              
              /&gt;
  
              {checked ? 
                &lt;CheckedContainer&gt;
                    {`s${i+1}`}
                &lt;/CheckedContainer&gt;            
              : 
                &lt;UncheckedContainer&gt;
                    {`Station ${i+1}`}
                &lt;/UncheckedContainer&gt;
              }
  
  
            &lt;/label&gt;
            )}
          )}
      &lt;/div&gt;
    )
  }
  
  export default Test;
  </code></pre>
  
  <p>Is is possible to clean this up a little but still use Styled Components?</p>