Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styling Intro

48619fc17b3ab68472aebd56c0106278?s=47 Max Stoiber
February 28, 2017

Styling Intro

React in Flip Flops satyling talk

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

February 28, 2017
Tweet

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