[React] Style a React component with styled-components

Posted 2020-10-01 Answer1215

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of javascript.

 

Old:

import React, { Component } from "react";
import "./App.css";

/* ======================= */
/* ===== sample data ===== */
/* ======================= */
const people = [
  { name: "Anna", sex: "female", age: 28 },
  { name: "John", sex: "male", age: 31 },
  { name: "Tim", sex: "male", age: 7 },
  { name: "Bella", sex: "female", age: 4 }
];

/* ============================== */
/* ===== the main component ===== */
/* ============================== */
const App = () =>
  <div>
    {people.map((person, i) => {
      return (
        <Person name={person.name} age={person.age} sex={person.sex} key={i} />
      );
    })}
  </div>;

/* =========================== */
/* ===== the Person card ===== */
/* =========================== */
const Person = props =>
  <div className={`person person--${props.sex}`}>
    <h2 className="person__name">{props.name}</h2>
    <p className="person__description">
      This <strong>{props.sex}</strong> is currently{" "}
      <strong>{props.age} years old</strong>.
    </p>
  </div>;

export default App;

.person {
  padding: 1.75rem;
  margin: .5rem;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  color: white;
}

.person--male {
  background: #44bccc;
}

.person--female {
  background: #f973bc;
}

.person__name {
  margin-top: 0;
  font-weight: 900;
  margin-bottom: .75rem;
}

.person__description {
  margin: 0;
  line-height: 1.5;
}

.person__description strong {
  font-weight: 900;
}

body {
  margin: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

 

Convert to styled-complement:

import React, { Component } from "react";
import styled from "styled-components";
import "./App.css";

/* ======================= */
/* ===== sample data ===== */
/* ======================= */
const people = [
  { name: "Anna", sex: "female", age: 28 },
  { name: "John", sex: "male", age: 31 },
  { name: "Tim", sex: "male", age: 7 },
  { name: "Bella", sex: "female", age: 4 }
];

/* ============================== */
/* ===== the main component ===== */
/* ============================== */
const App = () =>
  <div>
    {people.map((person, i) => {
      return (
        <Person name={person.name} age={person.age} sex={person.sex} key={i} />
      );
    })}
  </div>;

const Name = styled.h2`
  margin-top: 0;
  font-weight: 900;
  margin-bottom: .75rem;
`;

const Bio = styled.p`
  margin: 0;
  line-height: 1.5;
  strong {
    font-weight: 900;
  }
`;

const Card = styled.div`
  padding: 1.75rem;
  margin: .5rem;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  color: white;
  background: ${props => (props.sex === "male" ? "#44bccc" : "#f973bc")}
`;

/* =========================== */
/* ===== the Person card ===== */
/* =========================== */
const Person = props =>
  <Card sex={props.sex}>
    <Name>{props.name}</Name>
    <Bio>
      This <strong>{props.sex}</strong> is currently{" "}
      <strong>{props.age} years old</strong>.
    </Bio>
  </Card>;

export default App;

body {
  margin: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}