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. class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res =>

    { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } }
  2. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res =>

    { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } }
  3. If you’re writing React, you have access to a more

    powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “
  4. 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; `;
  5. 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; `;
  6. 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
  7. 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; `;
  8. 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; `;
  9. const App = () => ( <Wrapper> <Title> Hello World,

    this is my first styled component! </Title> </Wrapper> ); ReactDOM.render( <App />, document.getElementById(‘#app') );
  10. import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip;

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

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

    > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;
  13. 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;
  14. import { ThemeProvider } from 'styled-components'; const theme = {

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

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

    primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
  17. import styled from 'styled-components'; const Button = styled.button` /* Adjust

    background based on the theme */ background: ${props => props.theme.primary}; color: white; `;
  18. const redTheme = { primary: 'palevioletred', }; const blueTheme =

    { primary: 'mediumseagreen', }; // … <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider> <ThemeProvider theme={blueTheme}> <Button>I'm green!</Button> </ThemeProvider>
  19. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <Button>I'm still

    red!</Button> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  20. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <Button>I'm

    still red!</Button> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  21. <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>
  22. 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; `;
  23. 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; `;
  24. 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; `;
  25. 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; `;
  26. 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; `;
  27. class StyledComponentsNative extends Component { render() { return ( <Wrapper>

    <Title> Hello World, this is my first native styled component! </Title> </Wrapper> ); } }