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 lowercasetempleftprop
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.