9. AMPERSAND USAGE
Ampersands (&) get replaced by our generated, unique
classname for that styled component, making it easy
to have complex logic.
styled.a`
font-size: 20px;
&:hover {
color: red;
}
`;
10. WHAT IS THAT WEIRD `` THING???
"TAGGED TEMPLATE LITERAL"
console.log(`This is fine.`); // => "This is fine."
console.log`This is better.`; // => ["This is better."]
const status = "wizardry";
console.log`This is ${status}.` // => ["This is", "."], "wiz
12. How it fits in React ecosystem
1. 1. In "componentWillMount", it checks if component
will change dynamically based on props
2. 2. In "componentWillReceiveProps", it recalculates
styles, and re-inject them to head (if condition 1. is
true)
3. 2. In "componentWillUnmount", it removes any
listeners, to avoid memory leaks
14. INTERPOLATION
Code can be unreadable when not managed correctly,
due to a lot of interpolated strings
15. DEBUGGING IN DEVTOOLS
When using a lot of 'div' elements, class names don't
hint, what we are looking at, because they are random
strings
16. PERFORMANCE
Misunderstanding of how this library works, can result
in performance problems or weird bugs, like creating
new class an styles for component on each re-render
Using transitions with dynamic props isn’t a good idea,
since it always needs to recalculate and paint injected
styles on each transition trigger.
17. TIGHT COUPLING WITH REACT (OR
ALTERNATIVES)
It would be hard to migrate from currently used
framework or reuse your component in another
project.