styled-components
-
How they work
-
Best practices
-
New features & API changes
s-c work because of tagged template literals
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5265495/pasted-from-clipboard.png)
Tagged templates allow you to parse template literals with a function.
The first argument is an array of string literals, and the following arguments are the interpolations.
behind the scenes: tagged template literals
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5287284/pasted-from-clipboard.png)
behind the scenes: lifecycle
3. Create a React Component from the BaseStyledComponent
class
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5287287/pasted-from-clipboard.png)
2. Inject a marker into the stylesheet
1. Create a counter & unique ID for the component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5296801/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5296841/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5296845/pasted-from-clipboard.png)
behind the scenes: lifecycle
4. Inject into stylesheet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5296874/pasted-from-clipboard.png)
best practices: component architecture
Use the single responsibility principle
The single responsibility principle is a computer programming principle that states that every module or class should have responsibility over a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility.
Identify the discrete UI states the component needs to satisfy
Consider Reusability
1. Very specific use case?
2. App specific use cases?
3. Completely generic and reusable? (Can be used in any context)
Try to keep props state-oriented. Avoid adding props that shadow CSS properties.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266018/pasted-from-clipboard.png)
best practices: IRL
state = {
todos: []
todoLength: 0
}
Style declarations should be "derived" from UI state
1. Use inline styles
2. Extend the component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266051/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266054/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266055/pasted-from-clipboard.png)
best practices: IRL
Use inline styles or s-c's built in styled() function for minor tweaks
Avoid nested ternaries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266018/pasted-from-clipboard.png)
best practices: IRL
Document props with PropTypes
best practices: IRL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5301522/pasted-from-clipboard.png)
Use styled() to extend styles of 3rd-party components
(as long as props are passed through)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266118/pasted-from-clipboard.png)
best practices: IRL
Take advantage nested rules
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266182/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266192/pasted-from-clipboard.png)
best practices: IRL
Use the .attrs() helper to pass props
👎
best practices: IRL
👍
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5292287/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5292290/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5308351/pasted-from-clipboard.png)
Define s-c outside of the render method
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266240/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/815263/images/5266245/pasted-from-clipboard.png)
👎
👍
best practices: IRL
-
babel-plugin-styled-components
- server side rendering
- minification
- adds displayName to class for better debugging
-
jest-styled-components
- snapshot testing
- toHaveStyleRule()
-
vscode-styled-components
- syntax highlighting
-
stylelint-config-styled-components
- linting
best practices: tooling
styled-components@4.0.0: what's new
-
createGlobalStyle API
- replacement for .injectGlobal
-
"as" prop
- replacement for .withComponent()
-
deprecated Comp.extend
-
deprecated innerRef
-
StrictMode compliance for React 16
-
dropping support for React 15 and below
-
styled-components
By Kaitlin Moreno
styled-components
- 1,020