title: Styling react-router-dom Link using styled-components getting warning when passing props
body: <pre><code>import styled from 'styled-components';
  import {Link} from 'react-router-dom';
  
  const LS = {};
  
  LS.NavFixedItem_LINK = styled(Link)`
  
    display: flex;
    justify-content: ${props =&gt; props.tempLeftProp ? 'flex-start' : 'center'};
    align-items: center;
  `;
  
  function NavFixedItem(props) {
    return(
      &lt;LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}&gt;
        {props.name}
      &lt;/LS.NavFixedItem_LINK&gt;
    );
  }
  </code></pre>
  
  <p>I'm getting the error:</p>
  
  <blockquote>
    <p><strong>Warning:</strong> React does not recognize the <code>tempLeftProp</code> prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase <code>templeftprop</code> instead. If you accidentally passed it from a parent component, remove it from the DOM element.</p>
  </blockquote>
  
  <p>I pass props to my styled-components all the time. I don't know if the problem is that I'm styling a component <code>Link</code> instead of a regular HTML element.</p>
  
  <p><strong>QUESTION</strong></p>
  
  <p>Why am I getting this error? Is it safe to just ignore it?</p>
  
  <p>PS: The styles are being applied as intended.</p>