Styled Components
Joe Buza
What is SC?
A library that allows you to write actual css code to style your components
Why SC?
-
Simple
-
Utilizes the power of CSS
-
Supports React & React Native
-
Separate UI from Functional components
Basics
Passing props
Adapt using props
Overriding Styles
Overriding Third-party Comps
Animation
Theming
Tips & Tricks
function truncate(width) {
return `
width: ${width};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
}
const Box = styled.div`
${ truncate('250px') }
background: papayawhip;
`;Tips & Tricks
@mixin handheld {
@media (max-width: 420px) {
@content;
}
}
.box {
font-size: 16px;
@include handheld {
font-size: 14px;
}
}SASS
const media = {
handheld: (...args) => css`
@media (max-width: 420px) {
${ css(...args) }
}
`
}
// Make the text smaller on handheld devices
const Box = styled.div`
font-size: 16px;
${ media.handheld`
font-size: 14px;
` }
`;SC
Battle Tested
Resources
Questions?
Styled Components
By Joe Buza
Styled Components
The best way to style React components!
