title: Styled-components in React.js - props doesn't work
body: <p>I've tried everything. At least, for a while, I can't find any new possible solution for my problem. There is a possibility that I don't understand something, because I'm at the beginning of my adventure with React.js.</p>
  <p>To the point:</p>
  <p>I want to create a component-header with a background image. In the parent component, I put an image URL as a prop and try to use it in the child component as a <code>background-image: URL()</code>. And it, of course, doesn't work. Also, I've tried to set a colour, and it also doesn't work.</p>
  <p>Here is my parent component:</p>
  <pre><code>import Hero from '../Hero';
  import image from './cat.jpg'
  
  function Main() {
      
      return &lt;div&gt;
          &lt;Hero title=&quot;Only fluff photos&quot; image={image} color=&quot;#f0f&quot;/&gt;
      &lt;/div&gt;
  };
  </code></pre>
  <p>and here is my child component:</p>
  <pre><code>import styled from 'styled-components';
  
  const StyledHeader = styled.header`
      display: flex;
      width: 100%;
      height: 432px;
      background-image: url(${(props) =&gt; props.image});
      background-color: ${props =&gt; props.color ? props.color : &quot;#ff0&quot;};
  `
  
  function Hero(props) {
      
      return &lt;StyledHeader&gt;
          &lt;h1&gt;{props.title}&lt;/h1&gt;
          &lt;img src={props.image} alt=&quot;test cat&quot; /&gt;
      &lt;/StyledHeader&gt;
  };
  </code></pre>
  <p>What I've tried:</p>
  <ol>
  <li>Put the same URL into img tag as a <code>src</code> - it works</li>
  <li>Import an img directly in child component and us <code>{image}</code> - it works</li>
  <li>Use <code>require()</code> - it doesn't work</li>
  <li>Use <code>url(~{props.image})</code> - it doesn't work</li>
  <li>Use different forms of props when styling my <code>StyledHeader</code> - it doesn't work</li>
  <li>Put an image into a folder that has exactly the same path for both components - it doesn't work.</li>
  </ol>
  <p>Of course, all of points from 3 to 6 doesn't work, because none of props works. But I've found that later.</p>
  <p>styled-components gives an example of props usage:</p>
  <pre><code>background: ${props =&gt; props.primary ? &quot;palevioletred&quot; : &quot;white&quot;};
  </code></pre>
  <p>It doesn't help me :(</p>
  <p>Thanks in advance for any help! I have no idea what I've done wrong.</p>