5.07 Introducing Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress - github.com: Styled Components

Installation

Source: styled-components.com

npm
Yarn

npm install --save styled-components

yarn add styled-components

Usage

This is regular JavaScript though it's a feature called tacked templates and attached you find a link where you can learn more about it.

It has nothing to do with React that is available in vanilla JavaScript as well.

This method creates backticks in general can be used in JavaScript to create a so-called template literal.

This is a React component:

const StyleDiv = styled.div`
  width: 60%;
  margin: 16px auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 16px;
  text-align: center;

  @media (min-width: 500px) {
    width: 450px;
  }
`

Every method provided by this styled object no matter if that's div, h1 or whatever it is returns a React component.

Person.js
import React from "react";
import styled from "styled-components";

const StyleDiv = styled.div`
  width: 60%;
  margin: 16px auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 16px;
  text-align: center;

  @media (min-width: 500px) {
    width: 450px;
  }
`;

const person = (props) => {
  return (
    <StyleDiv>
      <p onClick={props.click}>
        I'm {props.name} and I am {props.age} years old!
      </p>
      <p>{props.children}</p>
      <input type="text" onChange={props.changed} value={props.name} />
    </StyleDiv>
  );
};

export default person;

We have a nice mixture of JSX and JavaScript all in one file with help of styled components.

Installation​

Usage​

Installation

Usage