title: Using useState-hook to alter styled-components from within
body: <p>I am making a component library to use in a project of mine - I've worked quite a bit with styled-components before and it's my preferred way of applying styles to my components.  What I like best about it is the ability to make my components fully functional and self-contained.</p>
  
  <p>I have one problem that I haven't really been able to solve satisfactory though.</p>
  
  <p>I want to do something like this, but whatever I do I can't seem to access or set the props from within the styled-component.</p>
  
  <pre><code>import React, { useState } from 'react';
  import styled from 'styled-components';
  
  const Button = ({ className }) =&gt; {
    const [clicked, setClicked] = useState(false);
    return (
      &lt;button className={className} clicked={clicked} onClick={() =&gt; setClicked(!clicked)}&gt;
        {this.props.children}
      &lt;/button&gt;
    );
  };
  
  export default styled(Button)`
    ${applySomeStyle}
    ${props =&gt; props.clicked} {
      ${applySomeOtherStyle}
    }
  `;
  </code></pre>
  
  <p>I have been able to 'solve' it by doing this, but it seems incredibly redundant to create a dummy component just for this purpose. It would seem more natural to just be able to do what I do in example #1.</p>
  
  <pre><code>import React, { useState } from 'react';
  import styled from 'styled-components';
  
  const Dummy = styled.button``;
  
  const Button = ({ className }) =&gt; {
    const [clicked, setClicked] = useState(false);
    return (
      &lt;Dummy className={className} clicked={clicked} onClick={() =&gt; setClicked(!clicked)}&gt;
        {this.props.children}
      &lt;/Dummy&gt;
    );
  };
  
  export default styled(Button)`
    ${applySomeStyle}
    ${Dummy} {
       ${props =&gt; props.clicked} {
         ${applySomeOtherStyle}
       }
    }
  `;
  </code></pre>
  
  <p>EDIT: The suggested linked issues are not applicable.  The first linked issue is a person essentially asking how to pass props to his child components.  The second issue is similar, but the answers are outdated because it predates the useState hook which allow us to not use Class components (The answer to the issue is basically saying that styled-components can't be used in Class components).</p>