Styling Intro

Transcript

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> ); } }
69. None

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