React Styled Components

November 2, 2018

code

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

code

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

code

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

code

// Button.js
import React from "react";
import "./Button.css";

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

export default Button;

code

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

React Styled Components

code

// 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

code

<Button danger>Dragons!</Button>

Traditional way

code

// 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;

code

/*
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

code

// 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;

React Styled Components

Component Architecture

Traditional React Components

React Styled Components

Conditional styles with props

Traditional way

Styled components way

Links