How to pass in two arguments to a props function in styled components

Question

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.

Answer 1

${({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.