Styling Intro

React in Flip Flops satyling talk

1. Styling React Applications Max Stoiber @mxstbr Open Source Developer, Thinkmill
2. Let’s talk about styling
3. The Checklist
4. No build requirements Small and lightweight Supports global CSS Supports entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components
5. There is no ✅✅✅ solution
6. Every app is different
7. The Example
8. fake.twitter.com
9. fake.twitter.com
10. fake.twitter.com <Tweet> <App>
11. fake.twitter.com <Tweet> <Header> <Content> <Footer>
12. 1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components The Methods
13. 1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components The Methods
14. html { color: #292f33; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3125; } .container { margin: 0 auto; width: 100%; } @media screen and (min-width: 360px) { html { font-size: 15px; } .container { max-width: 400px; } }
15. .tweet__content { font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0; padding: .65625rem 0 .98438rem; } .tweet__content a { color: #1da1f2; } .tweet__content a:hover { text-decoration: underline; }
16. const Content = ({ text, media }) => ( <div> <p className=“tweet__content" dangerouslySetInnerHTML={{ __html: text }} /> <a className=“tweet__media" target=“_blank" href={media.expanded_url} > <img className=“tweet__image" src={media.media_url_https} alt=“" /> </a> </div> );
17. No build requirements Small and lightweight Supports global CSS Supports entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ✅ ✅ ❌ ❌ ✅ (Custom Properties) ✅ ✅
18. 1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components The Methods
19. const styles = { container: { margin: '0 auto', width: '100%' } }
20. const styles = { content: { fontSize: '1.25rem', fontWeight: '300', lineHeight: '1.5em', margin: 0, padding: '.65625rem 0 .98438rem' } }
21. const Content = ({ text, media }) => ( <div> <p style={styles.content} dangerouslySetInnerHTML={{ __html: text }} /> <a style={styles.media} target=“_blank" href={media.expanded_url} > <img style={styles.image} src={media.media_url_https} alt=“" /> </a> </div> );
22. <p style="font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0; padding: .65625rem 0 .98438rem" />
23. No build requirements Small and lightweight Supports global CSS Supports entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ❌ ❌ ✅ ✅ ❌ ❌ ✅ ✅
24. 1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components The Methods
25. html { color: #292f33; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3125; } .container { margin: 0 auto; width: 100%; } @media screen and (min-width: 360px) { html { font-size: 15px; } .container { max-width: 400px; } }
26. .content { font-size: 1.25rem; font-weight: 300; line-height: 1.5em; margin: 0; padding: .65625rem 0 .98438rem; } .content a { color: #1da1f2; } .content a:hover { text-decoration: underline; }
27. import styles from './content.css'; const Content = ({ text, media }) => ( <div> <p className={styles.content} dangerouslySetInnerHTML={{ __html: text }} /> <a className={styles.media} target=“_blank" href={media.expanded_url} > <img className={styles.image} src={media.media_url_https} alt=“" /> </a> </div> );
28. /* content.css */ .content { /* … */ } .content__content__a452s { /* … */ } /* home.css */ .content { /* … */ } .home__content__juz65 { /* … */ }
29. No build requirements Small and lightweight Supports global CSS Supports entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ❌ (requires webpack) ✅ ✅ ✅ (has to be separate file) ✅ ✅ ❌ ✅ ✅
30. If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “
31. 1. CSS 2. Inline Styles 3. CSS Modules 4. styled-components The Methods
32. const styles = { color: '#000', }; Inline styles vs. CSS-in-JS // Inline styles: <p style={styles} /> // CSS-in-JS (requires lib): <p className={styles} />
33. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
34. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
35. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `; styled.h1
36. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
37. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
38. const App = () => ( <Wrapper> <Title> Hello World, this is my first styled component! </Title> </Wrapper> ); ReactDOM.render( <App />, document.getElementById(‘#app') );
39. styled-components
40. Adapting based on props
41. <Button>Normal</Button> <Button primary>Primary</Button>
42. const Button = styled.button` /* Adapt the colors based on primary prop */ 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; `; export default Button;
43. <Button>Normal</Button> <Button primary>Primary</Button>
44. styled-components
45. Theming Built In
46. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
47. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
48. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
49. import styled from 'styled-components'; const Button = styled.button` /* Adjust background based on the theme */ background: ${props => props.theme.primary}; color: white; `;
50. styled-components
51. const redTheme = { primary: 'palevioletred', }; const greenTheme = { primary: 'mediumseagreen', }; // … <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider> <ThemeProvider theme={greenTheme}> <Button>I'm green!</Button> </ThemeProvider>
52. styled-components
53. <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider>
54. <ThemeProvider theme={redTheme}> <div> <Button>I'm still red!</Button> </div> </ThemeProvider>
55. <ThemeProvider theme={redTheme}> <div> <Container> <Button>I'm still red!</Button> </Container> </div> </ThemeProvider>
56. <ThemeProvider theme={redTheme}> <div> <Container> <div> <Button>I'm still red!</Button> </div> </Container> </div> </ThemeProvider>
57. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Button>I'm still red!</Button> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
58. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <Button>I'm still red!</Button> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
59. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <Button>I'm still red!</Button> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
60. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <Button>I'm still red!</Button> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
61. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <span> <Button>I'm still red!</Button> </span> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
62. Full ReactNative Support
63. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
64. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
65. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
66. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
67. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
68. class StyledComponentsNative extends Component { render() { return ( <Wrapper> <Title> Hello World, this is my first native styled component! </Title> </Wrapper> ); } }
70. No build requirements Small and lightweight Supports global CSS Supports entirety of CSS Colocated Isolated Easy to override Theming Server side rendering No wrapper components ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ❌
71. Get styling! git checkout 4-styling