Styled Components

Transcript

1. Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
2. github.com/evertondenis linkedin.com/in/evertondenis
3. zup.com.br
4. O que é styled components?
5. • Uma biblioteca para React e React Native que permite que você use estilos ao nível de componente na sua aplicação. • Eles são escritos em uma mistura de JavaScript com CSS. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ${props => props.primary && css` background: white; color: palevioletred; `} `
6. Instalação e Uso
7. npm install --save styled-components ou yarn styled-components import styled from 'styled-components'; const Button = styled.button``;
8. Primitivos
9. const Button = styled.div``; const Button = styled.h1``; const Button = styled.span``; const Button = styled.section``; const Button = styled.main``; ...
10. Compressão de estilos
12. const Example = styled.div` padding: 2em 1em; background: papayawhip; &:hover { background: palevioletred; } @media (max-width: 600px) { background: tomato; &:hover { background: yellow; } } > p { text-decoration: underline; }
13. Props
14. const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; render( <div> <Button>Normal</Button> <Button primary>Primary</Button> </div> );
15. Compondo estilos
17. const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; const TomatoButton = Button.extend` color: tomato; border-color: tomato; `;
18. JSX mais explícito
21. Theme
22. const Button = styled.button` font-size: 1em; margin: 1em; padding: 0.25em 1em; border-radius: 3px; color: ${props => props.theme.main}; border: 2px solid ${props => props.theme.primary}; `; const theme = { main: 'mediumseagreen'; primary: 'tomato'; secondary: 'papayawhip'; }; export default theme ... render( <div> <Button>Normal</Button> <ThemeProvider theme={theme}> <Button>Themed</Button> </ThemeProvider> </div> ); ...
23. Obrigado!
24. • https://www.styled-components.com/ • https://github.com/styled-components/jest-styled-components • https://github.com/styled-components/styled-components • https://medium.com/@jamiedixon/styled-components-production-patterns-c22e2 4b1d896