title: CSS styling for a boolean React hook button
body: <p>I have a simple message board with nested comments built in React. I'm trying to add a favorite button (just a button that toggles filled/unfilled contingent on its boolean value). Every tutorial I find involves making a new component, but I'd like to include this in my primary app code (using a hook/useState). </p>
  
  <p>I've tried some various CSS stuff like active, etc. I'm rusty with CSS and a bit lost using it on JSX. Ideally, it'd be a star button that fills/unfills, but I want to figure out the simple basics here first.</p>
  
  <pre><code>function Toggle(props) {
    const [toggleState, setToggleState] = useState(false);
  
    function toggle() {
      setToggleState(toggleState === false? true : false);
    }
  
    return (
      &lt;div {...props}&gt;
        &lt;Button 
        className={`switch ${toggleState}`} 
        onClick={toggle}&gt;
        Favorite
        &lt;/Button&gt;
      &lt;/div&gt;
      )
  }
  
  Toggle=styled(Toggle)`
  //dunno what to put here
  </code></pre>
  
  <p>The button shows up just fine but nothing I try in the style will make it toggle colors (or filled/unfilled) on click. How can I do this? </p>