title: Multiple Props Options for Styled Components
body: <p>I have a navbar component that I have created using Styled Components.  I would like to create some props that change the background-color and/or text color.</p>
  
  <p>For instance:  <code>&lt;Navbar dark&gt;</code> should have the following CSS:</p>
  
  <pre><code>background: #454545;
  color: #fafafa;
  </code></pre>
  
  <p>Whereas <code>&lt;Navbar light&gt;</code> should be the opposite:</p>
  
  <pre><code>background: #fafafa;
  color: #454545;
  </code></pre>
  
  <p>If, however, neither prop is used, then I want to have a default background and text color -- say (for demo purposes), something like this:</p>
  
  <pre><code>background: #eee;
  color: #333;
  </code></pre>
  
  <p>Now, my question is how to set this up in Styled Components.</p>
  
  <p>I can do the following:  </p>
  
  <pre><code>background: ${props =&gt; props.dark ? #454545 : '#eee'}
  background: ${props =&gt; props.dark ? #fafafa : '#eee'}
  background:  #eee;
  </code></pre>
  
  <p>And something similar for color.</p>
  
  <p>But this is redundant and not very elegant.  I would like some sort of if/else statement:</p>
  
  <pre><code>background: ${ props =&gt; { 
    if (props.dark) { #454545 }
    elseif (props.light) { #fafafa }
    else { #eee }
  }
  </code></pre>
  
  <p>But I don't know how to set something like that up in Styled Components.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks in advance.</p>