I have a styled-components in my React component and it currently uses the props feature on styled components.
I need to style using another property but I keep getting an error when I try to pass it in.
This is what I currently have and this works fine.
border: 1px solid ${(props) => (props.isError ? "red" : "transparent")};
This is what I am trying to achieve:
border: 1px solid ${(props) => props.isError ? theme.Colors.red : "transparent"};
Is there a way to pass in the theme as an additional prop in the props function?
I keep getting this error **Cannot find name 'theme'.**, even though it is being used in other parts of my styled component.
${({theme, isError}) => ...} is what you're looking for.
You need to destructure all the props out of the props object - or otherwise you'd use props.theme.Colors.red - as props will contain the theme object the way you're writing it.