Using Props In Styled-Components

[!INFO]-
topic: 🧩 React
links: Using styled-components to create scoped styling
source: https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/25597278#overview
tags: #permanent-note #published

Last Modified: =dateformat(this.file.mtime, "MMM. dd, yyyy - HH:mm")

You can pass props into styled-components to influence the styling.

You can pass props into styled-components in the same way that you pass props into other react components.

...
<FormControl invalid={!isValid}>
...

You handle the props like this:

const FormControl = styled.div`
	border: 1px solid ${props => props.invalid ? 'red' : '#ccc'}
`

You use the default syntax to use JavaScript inside template literals and pass the props into the function to access its properties.