This document provides an overview of styled components, a library that allows encapsulating styles with components. It discusses how styled components solve issues like styles encapsulation and dynamic styling. It demonstrates basic usage and API methods. Key features covered include CSS support, ampersand usage for nested selectors, tagged template literals for style injection, and how styled components integrate with React. Potential problems and caveats discussed are interpolation readability, debugging class names, performance, and tight coupling with frameworks.

2. DIVE INTO STYLED COMPONENTS

3. What are styled components?

4. What do they solve?
Styles encapsulation
Mapping between js and css
Dynamic styling

5. Where can we use them
React
vue.js
react native
traditional dom

6. Example usage
import styled from 'styled-components';
const HeaderText = styled.h1`
font-size: ${ props => props.large ? 32 : 24 }px;
color: wheat;
text-transform: uppercase;
`;
export default () => (
<HeaderText large>Looks Cool</HeaderText>
);

7. API overview
import styled, { keyframes, injectGlobal, css } from 'styled-c
const Div1 = styled('div')``;
const Div2 = styled.div``;
const Div3 = Div3.extend``;
const Link = Div3.withComponent('a');
const Img = styled.img.attrs({ alt: 'custom iamge' })``;
injectGlobal`
body {
background-color: blue;
}
`;
const fadeIn = css`

8. 100% CSS SUPPORT

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

11. How syled-components use Tagged Template Literals
const properties = {
status: "AMAZING"
};
function transformStrings(strings, ...args) {
return strings.map((string, i) => {
const correspondingFunction = args[i];
if (correspondingFunction && typeof correspondingFunction
return string + correspondingFunction(properties);
} else {
return string;
}
})
}

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

13. PROBLEMS AND
CAVEATS

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.

18. LINTING
It works, but it's buggy, which makes it somewhat
useless

19. THANK YOU!
THAT'S ALL FOR TODAY