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

Styling React Applications

Max Stoiber
October 28, 2016

Styling React Applications

Max Stoiber

October 28, 2016
Tweet

More Decks by Max Stoiber

Other Decks in Technology

Transcript

  1. <>
    styled-components
    Max Stoiber
    @mxstbr
    Open Source Developer, Thinkmill

    View Slide

  2. View Slide

  3. View Slide

  4. The Component Age

    View Slide

  5. 1. Small, focussed components
    2. Use container components
    Best Practices: Components

    View Slide

  6. Small, focussed components

    View Slide



  7. View Slide



  8. Implementation detail!
    Implementation detail!

    View Slide



  9. View Slide

  10. Split containers and components

    View Slide

  11. class Sidebar extends React.Component {
    componentDidMount() {
    fetch('api.com/sidebar')
    .then(res => {
    this.setState({
    items: res.items
    })
    });
    }
    render() {
    return (

    {this.state.items.map(item => (
    {item}
    ))}

    )
    }
    }

    View Slide

  12. class SidebarContainer extends React.Component {
    componentDidMount() {
    fetch('api.com/sidebar')
    .then(res => {
    this.setState({
    items: res.items
    })
    });
    }
    render() {
    return (

    {this.state.items.map(item => (

    ))}

    )
    }
    }

    View Slide

  13. Containers = How things work
    Components = How things look

    View Slide

  14. What about styling?

    View Slide

  15. 1. Single-use classes
    2. Components as a styling
    construct
    Best Practices: Styling

    View Slide

  16. If you’re writing React, you
    have access to a more
    powerful styling construct
    than CSS class names. You
    have components.”
    – Michael Chan, @chantastic

    View Slide

  17. Enforcing best practices?

    View Slide

  18. styled-components

    View Slide

  19. Glen Maddern
    frontend.center

    View Slide

  20. Remove the mapping between
    styles and components

    View Slide

  21. 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;
    `;

    View Slide

  22. 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;
    `;

    View Slide

  23. 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

    View Slide

  24. 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;
    `;

    View Slide

  25. 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;
    `;

    View Slide

  26. const App = () => (


    Hello World, this is my first styled component!


    );
    ReactDOM.render(
    ,
    document.getElementById(‘#app')
    );

    View Slide

  27. styled-components

    View Slide

  28. Write actual CSS

    View Slide

  29. import styled from 'styled-components';
    const ColorChanger = styled.section`
    background: papayawhip;
    > h2 {
    color: palevioletred;
    }
    @media (min-width: 875px) {
    background: mediumseagreen;
    > h2 {
    color: papayawhip;
    }
    }
    `;

    View Slide

  30. import styled from 'styled-components';
    const ColorChanger = styled.section`
    background: papayawhip;
    > h2 {
    color: palevioletred;
    }
    @media (min-width: 875px) {
    background: mediumseagreen;
    > h2 {
    color: papayawhip;
    }
    }
    `;

    View Slide

  31. import styled from 'styled-components';
    const ColorChanger = styled.section`
    background: papayawhip;
    > h2 {
    color: palevioletred;
    }
    @media (min-width: 875px) {
    background: mediumseagreen;
    > h2 {
    color: papayawhip;
    }
    }
    `;

    View Slide

  32. color-changer

    View Slide

  33. Adapting based on props

    View Slide

  34. Normal
    Primary

    View Slide

  35. 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;

    View Slide

  36. Normal
    Primary

    View Slide

  37. styled-components

    View Slide

  38. Theming Built In

    View Slide

  39. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View Slide

  40. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View Slide

  41. import { ThemeProvider } from 'styled-components';
    const theme = {
    primary: 'palevioletred',
    };
    const App = () => (



    );

    View Slide

  42. import styled from 'styled-components';
    const Button = styled.button`
    /* Adjust background based on the theme */
    background: ${props => props.theme.primary};
    color: white;
    `;

    View Slide

  43. styled-components

    View Slide

  44. const redTheme = {
    primary: 'palevioletred',
    };
    const blueTheme = {
    primary: 'mediumseagreen',
    };
    // …

    I'm red!


    I'm green!

    View Slide

  45. styled-components

    View Slide


  46. I'm red!

    View Slide



  47. I'm still red!


    View Slide




  48. I'm still red!



    View Slide





  49. I'm still red!




    View Slide






  50. I'm still red!





    View Slide







  51. I'm still red!






    View Slide








  52. I'm still red!







    View Slide









  53. I'm still red!








    View Slide










  54. I'm still red!









    View Slide

  55. Full ReactNative Support

    View Slide

  56. 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;
    `;

    View Slide

  57. 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;
    `;

    View Slide

  58. 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;
    `;

    View Slide

  59. 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;
    `;

    View Slide

  60. 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;
    `;

    View Slide

  61. class StyledComponentsNative extends Component {
    render() {
    return (


    Hello World, this is my first native styled component!


    );
    }
    }

    View Slide

  62. View Slide

  63. $ yarn add styled-components
    github.com/styled-components/styled-components
    $ npm install styled-components

    View Slide

  64. Thank you!
    Max Stoiber
    @mxstbr
    Come talk to me!

    View Slide

  65. View Slide