title: Assign styled-component CSS property based on props passed to component
body: <p>I have two components <strong><em>TextField</em></strong> and <strong><em>Label</em></strong>.</p>
  
  <p>The TextField is passing the prop <strong><em>req</em></strong> to the Label. I want to modify the styled-component based on the <strong><em>req</em></strong> prop being passed in. Here is my current code that is not working. </p>
  
  <p>No errors are being reported to the console.</p>
  
  <p><strong>TextField.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import styled from 'styled-components';
  import Label from '../Label/Label';
  
  const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    margin: 16px 8px 8px 8px;
  `;
  
  const Input = styled.input`
    border-bottom: 1px solid rgba(0, 0, 0, .23);
  
    &amp;:focus {
      border-bottom: 1px solid #2196f3;
    }
  `;
  
  class TextField extends Component {
    render() {
      const {
        label,
        req = true,
      } = this.props;
  
      return (
        &lt;Wrapper&gt;
          &lt;Label req={req} text={label}/&gt;
          &lt;Input type={'textfield'}/&gt;
        &lt;/Wrapper&gt;
      );
    }
  }
  
  export default TextField;
  </code></pre>
  
  <p><strong>Label.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import styled from 'styled-components';
  
  const LabelBase = styled.label`
    color: rgba(0, 0, 0, .54);
    font-size: 1rem;
    line-height: 1;
  
    &amp;:after {
      content: ${props =&gt; props.req ? '*' : ''};
    }
  `;
  
  class Label extends Component {
    render() {
      const {
        req,
        text,
      } = this.props;
  
      return (
        &lt;LabelBase req={req}&gt;{text}&lt;/LabelBase&gt;
      );
    }
  }
  
  export default Label;
  </code></pre>