title: How to use Styled Components for a component passed as props
body: <p>I have 3 components in 3 differents files :</p>
  
  <pre><code>//file1
  const Icon1 = styled.div`
  width: 10px;
  `;
  const Widget1 = () =&gt; &lt;BaseWidget icon={&lt;Icon1 /&gt;} /&gt;
  
  //file2  
  const Icon2 = styled.div`
  width: 15px;
  `;
  const Widget2 = () =&gt; &lt;BaseWidget icon={&lt;Icon2 /&gt;} /&gt;
  
  //file3
  const Icon3 = styled.div`
  width: 20px;
  `;
  const Widget3 = () =&gt; &lt;BaseWidget icon={&lt;Icon3 /&gt;} /&gt;
  </code></pre>
  
  <p>and my base widget :</p>
  
  <pre><code>//basewidget
  const BaseWidget = (props) =&gt; &lt;div&gt;{props.icon}&lt;/div&gt;
  </code></pre>
  
  <p>My question is : how can I add style to props.icon in basewidget ?
  Can I create a styled component based on props.icon and add a common css property ?
  If it's not possible what is the best solution ?</p>
  
  <p>Thanks,
  Jef</p>