Styled Components - Martin Čuchta

1. styled-components

2. www.sli.do #FMKE5

3. www.sli.do #FMKE5

4. CSS sucks
www.sli.do #FMKE5

5. React
HTML + JS = JSX
www.sli.do #FMKE5

6. React
HTML + CSS + JS = JSX
www.sli.do #FMKE5

7. Motivation
.btn { … }
<Button />
www.sli.do #FMKE5

8. Profit?
- izolované štýlovanie
- nesting ako v SASS
- je to len CSS
- variables, functions, atď…
- témy
- React Native
- je to Javascript
www.sli.do #FMKE5

9. Basic React component …
const Product = (props) => {
return <div>
<div>{props.name}</div>
<div>{props.price}</div>
</div>;
}
www.sli.do #FMKE5

10. … with styled components
const Product = (props) => {
return <Wrapper>
<Title>{props.name}</Title>
<Price>{props.price}</Price>
</Wrapper>;
}
www.sli.do #FMKE5

11. Styled Components
const Title = styled.div`
font-size: 20px
`;
const Price = styled.div`
color: ${({theme}) => theme.primary};
www.sli.do #FMKE5

12. Themes
Sidebar Content
HeaderHeader
Sidebar ContentContent
www.sli.do #FMKE5

13. DEMO TIME
www.sli.do #FMKE5

14. Q&A