Styling React-router-dom Link Using Styled-components Getting Warning When Passing Props

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

I'm getting the error:

Warning: React does not recognize the tempLeftProp prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase templeftprop instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I pass props to my styled-components all the time. I don't know if the problem is that I'm styling a component Link instead of a regular HTML element.

QUESTION

Why am I getting this error? Is it safe to just ignore it?

PS: The styles are being applied as intended.

Internally, React Router's Link passes all the its props to an <a> DOM element. Except the ones used by Link, like to. So the styles work because the props are interpreted by Styled Components, but then the same prop is passed again to the inner <a>, which triggers the (harmless) error message.

You could try having a wrapper with nested styles, like this:

LS.NavFixedItem_LINK = styled.div`
  a {
    display: flex;
    justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
    align-items: center;
  }
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK tempLeftProp={props.toLeft}>
      <Link to={props.link}>
        {props.name}
      </Link>
    </LS.NavFixedItem_LINK>
  );
}