React Styled Components

Edit on Github
reactjs/react_styled_components.md
Nov 02, 2018
Reactjs 
#sudo npm i -g create-react-app
yarn global add create-react-app

create-react-app react-styled-components
cd react-styled-components

# npm i --save styled-components
yarn add styled-components

Component Architecture

We usually have categories for the components..

src
├── components
│   ├── common
│   ├── containers
│   └── pages
├── index.css
├── logo.svg
└── index.js

Containers interact with data and have business logic, these generally won’t have any styles associated with them. They are responsible for interacting with data stores and passing it down to child components

Pages consist of top level pages, Home, Contact, Landing etc.

Common has things like buttons. These are a good starting point for styled components.

Traditional React Components

common
├── Button.css
└── Button.js

// Button.js
import React from 'react'
import './Button.css'

const Button = ({ children }) => {
  return (
    <button className='btn'>
      { children }
    </button>
  )
}

export default Button

/*
Button.css
*/
.btn {
  background: plum;
  border: none;
  padding: 1em;
}

React Styled Components

// Button.js
import React from 'react'
import styled from 'styled-components'

const Button = styled.button`
  background: salmon;
  border: none;
  padding: 1em;
`

export default Button

  • after styled. could be an valid HTML element: styled.button, styled.section, styled.h1 etc.

  • within the backticks you can add ANY valid CSS markup, e.g. media queries, nested CSS, pseudo-selectors etc.

  • the {children} are already taken care of

Conditional styles with props

<Button danger>
  Dragons!
</Button>

Traditional way

// Button.js

import React from 'react'
import './Button.css'

// Conditional Styling based on props
const Button = ({ danger, children }) => {
  return (
    <button className={`btn ${danger ? ' btn-danger' : ''}`}>
      { children }
    </button>
  )
}

export default Button

/*
Button.css
*/

.btn {
  padding: 1em;
  border: none;
  font-weight: bold;
}

.btn-danger {
  background: #DC3545;
  color: white;
}

Styled components way

  • You have access to props from within the styled component
  • If danger has been passed as prop, render some more css
  • Look into tagged template literals for more on how this works
// Button.js

import React from 'react'
import styled, { css } from 'styled-components'

const Button = styled.button`
  padding: 1em;
  border: none;
  font-weight: bold;

  /* If 'danger' has been passed as prop, render some more 'css' */
  ${props => props.danger && css`
    background: #DC3545;
    color: white;
  `}
`

export default Button