title: How can I custom react icon color in styled-components?
body: <p>I seperated input elements and I want to custom react icon color depending on whether it's checked or not.
  Here is my code.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;label htmlFor=&quot;female&quot;&gt;
                &lt;Input
                  check
                  type=&quot;radio&quot; //
                  name=&quot;radio&quot;
                  checked
                  id=&quot;female&quot;
                /&gt;
                &lt;FaCheckCircle className=&quot;check&quot; /&gt;
                Female
              &lt;/label&gt;
  </code></pre>
  <p>And this is the input element code.</p>
  <pre class="lang-js prettyprint-override"><code>import styled from '@emotion/styled';
  
  interface InputPropsType {
    check?: boolean;
    type?: string;
    name?: string;
    checked?: boolean;
    id?: string;
  }
  export default function Input({
    check,
    type,
    name,
    checked,
    id,
  }: InputPropsType) {
    if (check) {
      return (
        &lt;CheckInput
          type={type} //
          name={name}
          checked={checked}
          id={id}
        /&gt;
      );
    }
  }
  
  const CheckInput = styled.input`
    display: none;
    .check {
      color: ##c7c7c7;
    }
    :checked ~ .check {
      color: #9a8576;
    }
  `;
  </code></pre>
  <p>:checked~ .check {} works well but the problem is this part doesn't work...</p>
  <pre class="lang-js prettyprint-override"><code>.check {
      color: ##c7c7c7;
    }
  </code></pre>