 form the foundation of all client-side applications. Each of these languages handles a different responsibility. HTML markup semantically organizes content, CSS rules styles content and JavaScript code adds dynamic interactivity to the content. Traditionally, developers build basic client-side applications along this standard separation of concerns, which groups code solely by language (and implicitly, by file type): HTML for structure, CSS for presentation and JavaScript for behavior. However, siloing code this way comes with a caveat. For example, if you have a carousel on your homepage, and you decide to modify its appearance, then you may need to consult three separate files (

With modern JavaScript libraries/frameworks, such as 

, the separation of concerns shifts from languages to components. Now, all code belonging to a single component lives within a single file (

 for React). The component itself, written as a functional or class component, contains methods (lifecycle, render, etc.) that encapsulate its behavior. The JSX syntax within the 

 statement if written as a function) describes the component's structure. As for the component's presentation, there are two common approaches:

Large CSS stylesheets are difficult to maintain, especially when tracking which rules override others and which rules can/cannot be removed. If you write styles using a CSS-in-JS library, then all styles belonging to a component exists alongside the component within a 

 file if imported from a separate file). When the component is no longer used within the application, then deleting the component's styles is as simple as deleting the component itself.

For a React component library, CSS-in-JS libraries provide lots of functionality to supercharge components' styles:

 to a React component library and how to style a component with 

 works, let's walkthrough a simple example:

import React from "react";
import styled from "styled-components";

const StyledHeading = styled.h1`
  font-size: 4rem;
  font-weight: 700;
  color: black;
`;

export const Heading = ({ children }) => (
  <StyledHeading>{children}</StyledHeading>
);

import React from "react";
import { Heading } from "./components/Heading";

export const App = () => <Heading>Hello CodeSandbox!</Heading>;

: By convention, the names of styled components are prefixed with 

, which tells developers distinguish styled components from other components. 

 element that is bolded, colored black and has a font size of 

In fact, you can customize the styles based on props passed to the styled component:

import React from "react";
import styled from "styled-components";

const StyledHeading = styled.h1`
  font-size: 4rem;
  font-weight: 700;
  color: ${(props) => props.color || "black"};
`;

export const Heading = ({ children, color }) => (
  <StyledHeading color={color}>{children}</StyledHeading>
);

import React from "react";
import { Heading } from "./components/Heading";

export const App = () => <Heading color="blue">Hello CodeSandbox!</Heading>;

The most common way to write styled components is with 

. Appending a template literal to the end of a tag function name executes the tag function with the template literal and its placeholder expressions passed as arguments. 

 function is called, the template literal is broken up into smaller substrings based on the positions of the placeholder expressions. As you can see, the substrings that come before and after the placeholder expressions (including empty strings if the placeholder expression is located at the start/end of the template literal), such as 

, are stored within an array that's passed as the first argument to 

. Each placeholder expression is passed as a separate argument to 

. With the rest parameter syntax, we can have the function accept these separate arguments as a single array, hence why the 

 returns a React component, we can write our own basic  implementation of the 

First, establish a list of HTML tags you want the 

 object to support. Let's start off with 

const TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"];

 object, which will be exported for other files to import.

const styled = TAGS.reduce((module, tag) => ({
  ...module,
  [tag]: createStyledComponent(tag)
}), {});

 will be a function that accepts a tag as an argument (since it must know which HTML element to render), and it will style and return a React component based on the tagged template literal.

Due to the closure, the anonymous function returned by 

 allows the functional component to access the tagged template strings and expressions. Also, some of the expressions are functions that involve props passed to the functional component. Using the tagged template strings, expressions and props, the functional component takes these values and applies styles to the element accordingly.

 parses the tagged template literal into an object that contains the CSS rules as key/value pairs. All function expressions are evaluated with the component's props passed as its argument. 

For example, if the component has no props passed to it, then this...

font-size: 4rem;
font-weight: 700;
color: ${(props) => props.color || "black"};

{
  "font-size": "4rem",
  "font-weight": 700,
  "color": "black"
}

All excess whitespace around the rules and their properties/values are removed. All non-integer and non-string values (booleans, functions, arrays, etc.) are omitted.

import { createElement } from "react";

const TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"];

const isNumOrStr = (value) =>
  typeof value === "string" || typeof value === "number";

const parseStyles = (strs, exps, props) => {
  const interpolatedStyles = strs.reduce((styles, str, i) => {
    let exp = exps[i];

    if (typeof exp === "function") {
      exp = exp(props);
    }

    styles += str + (isNumOrStr(exp) ? exp : "");

    return styles;
  }, "");

  return interpolatedStyles.split(";").reduce((styles, declaration) => {
    let [property, value] = declaration.trim().split(":");

    if (isNumOrStr(property) && isNumOrStr(value)) {
      property = property.trim();
      value = value.trim();

      styles[property] = value;
    }

    return styles;
  }, {});
};

const createStyledComponent = (tag) => {
  return (strs, ...exps) => {
    return (props) => {
      // Process the tagged template literal with `strs` and `exps`.
      const style = parseStyles(strs, exps, props);

      return createElement(tag, { style, ...props }, props.children);
    };
  };
};

const styled = TAGS.reduce(
  (module, tag) => ({
    ...module,
    [tag]: createStyledComponent(tag)
  }),
  {}
);

export default styled;

 with this implementation, then the application still works.

import React from "react";
// import styled from "styled-components";
import styled from "../styled";

const StyledHeading = styled.h1`
  font-size: 4rem;
  font-weight: 700;
  color: ${(props) => props.color || "black"};
`;

export const Heading = ({ children, color }) => (
  <StyledHeading color={color}>{children}</StyledHeading>
);

Nevertheless, this implementation only inlines styles directly on the element. It does not generate custom CSS class names and cannot process SCSS-like syntax with nesting, such as 

 to compile code written with this syntax into CSS code. The purpose of this implementation is to demonstrate how 

, a component library that contains customizable D3 visualizations written in React and TypeScript. Currently, this repository only has one visualization component, a scatterplot.

$ git clone -b library https://github.com/newline-sandbox/react-d3-charts.git

Inside of the project directory, install the dependencies:

$ npm install --save-dev @types/styled-components

 file, which houses the component that renders a x-axis for the scatterplot component, observe that the two 

 elements draw upon the same set of attributes and values: font family, font size and fill. If the component had many 

 elements that rely on these same attributes, then there will be more repetitive JSX code. 

Let's place these styles within a single styled component named 

const StyledText = styled.text`
  fill: ${FONT_COLOR};
  font-family: ${FONT_FAMILY};
  font-size: ${FONT_SIZE};
`;

<g
  transform={`translate(${dimensions.margins.left}, ${
    dimensions.height - (dimensions.margins.bottom - dimensions.margins.top)
  })`}
>
  {(ticks ? ticks : scale.ticks(ticksCount)).map((tick, i) => (
    <g key={`${tick}-${i}`} transform={`translate(${scale(tick)} 0)`}>
      <line stroke={AXIS_COLOR} y1="5" y2="0" />
      <StyledText y="20" textAnchor="middle">
        {tick}
      </StyledText>
    </g>
  ))}
  <path fill={AXIS_COLOR} d={`M0,2V0H${dimensions.width}V2`}></path>
  <StyledText
    x={`${
      dimensions.width / 2 -
      dimensions.margins.left -
      dimensions.margins.right
    }`}
    y={`${dimensions.margins.bottom - 15}`}
  >
    {label}
  </StyledText>
</g>

If you inspect this styled component via the developer console, then you will see a custom CSS class name added to the 

const StyledLine = styled.line`
  stroke: ${AXIS_COLOR};
`;

const StyledPath = styled.path`
  fill: ${AXIS_COLOR};
`;

<g
  transform={`translate(${dimensions.margins.left}, ${
    dimensions.height - (dimensions.margins.bottom - dimensions.margins.top)
  })`}
>
  {(ticks ? ticks : scale.ticks(ticksCount)).map((tick, i) => (
    <g key={`${tick}-${i}`} transform={`translate(${scale(tick)} 0)`}>
      <StyledLine y1="5" y2="0" />
      <StyledText y="20" textAnchor="middle">
        {tick}
      </StyledText>
    </g>
  ))}
  <StyledPath d={`M0,2V0H${dimensions.width}V2`} />
  <StyledText
    x={`${
      dimensions.width / 2 -
      dimensions.margins.left -
      dimensions.margins.right
    }`}
    y={`${dimensions.margins.bottom - 15}`}
  >
    {label}
  </StyledText>
</g>

If you inspect these styled components via the developer console, then you will see custom CSS class names added to the 

, then you will see that the y-axis has the same elements with the same styles as the x-axis: 

We can refactor the code to make the styled components 

$ mkdir src/styled
$ touch src/styled/index.ts

import styled from "styled-components";
import { FONT_FAMILY, FONT_SIZE, FONT_COLOR, AXIS_COLOR } from "../enums";

export const StyledText = styled.text`
  fill: ${FONT_COLOR};
  font-family: ${FONT_FAMILY};
  font-size: ${FONT_SIZE};
`;

export const StyledLine = styled.line`
  stroke: ${AXIS_COLOR};
`;

export const StyledPath = styled.path`
  fill: ${AXIS_COLOR};
`;

import React from "react";
import PropTypes from "prop-types";
import { StyledPath, StyledLine, StyledText } from '../styled';
import { Dimensions } from "../types";
import { dimensionsPropsType } from "../utils";

export interface XAxisProps {
  dimensions: Dimensions;
  label: string;
  scale: {
    (tick: string | number | Date): number;
    ticks(count?: number): number[];
  };
  ticks?: (string | number | Date)[];
  ticksCount?: number;
}

export const XAxis = ({
  dimensions,
  label,
  scale,
  ticks,
  ticksCount,
}: XAxisProps): JSX.Element => (
  <g
    transform={`translate(${dimensions.margins.left}, ${
      dimensions.height - (dimensions.margins.bottom - dimensions.margins.top)
    })`}
  >
    {(ticks ? ticks : scale.ticks(ticksCount)).map((tick, i) => (
      <g key={`${tick}-${i}`} transform={`translate(${scale(tick)} 0)`}>
        <StyledLine y1="5" y2="0" />
        <StyledText y="20" textAnchor="middle">
          {tick}
        </StyledText>
      </g>
    ))}
    <StyledPath d={`M0,2V0H${dimensions.width}V2`} />
    <StyledText
      x={`${
        dimensions.width / 2 -
        dimensions.margins.left -
        dimensions.margins.right
      }`}
      y={`${dimensions.margins.bottom - 15}`}
    >
      {label}
    </StyledText>
  </g>
);

XAxis.displayName = "XAxis";

XAxis.propTypes = {
  dimensions: dimensionsPropsType,
  label: PropTypes.string.isRequired,
  scale: PropTypes.func.isRequired,
  ticks: PropTypes.arrayOf(
    PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Date),
    ])
  ),
  ticksCount: PropTypes.number,
};

XAxis.defaultProps = {};

import React from "react";
import PropTypes from "prop-types";
import { StyledPath, StyledLine, StyledText } from "../styled";
import { Dimensions } from "../types";
import { dimensionsPropsType } from "../utils";

export interface YAxisProps {
  dimensions: Dimensions;
  label: string;
  scale: {
    (tick: string | number | Date): number;
    ticks(count?: number): number[];
  };
  ticks?: number[];
  ticksCount?: number;
}

export const YAxis = ({
  dimensions,
  label,
  scale,
  ticks,
  ticksCount,
}: YAxisProps): JSX.Element => (
  <g transform={`translate(${dimensions.margins.left}, 0)`}>
    {(ticks ? ticks : scale.ticks(ticksCount)).map((tick, i) => (
      <g key={`${tick}-${i}`} transform={`translate(0, ${scale(tick)})`}>
        <StyledLine x1="-5" x2="0" />
        <StyledText x="-10" dominantBaseline="middle" textAnchor="end">
          {tick}
        </StyledText>
      </g>
    ))}
    <StyledPath
      d={`M-2,0H0V${
        dimensions.height - (dimensions.margins.bottom - dimensions.margins.top)
      }H-2`}
    ></StyledPath>
    <StyledText
      x={`${(dimensions.height / 2) * -1}`}
      y={`${15 - dimensions.margins.left}`}
      transform="rotate(-90)"
      textAnchor="middle"
    >
      {label}
    </StyledText>
  </g>
);

YAxis.displayName = "YAxis";

YAxis.propTypes = {
  dimensions: dimensionsPropsType,
  label: PropTypes.string.isRequired,
  scale: PropTypes.func.isRequired,
  ticks: PropTypes.arrayOf(PropTypes.number),
  ticksCount: PropTypes.number,
};

YAxis.defaultProps = {};

For a final version of this tutorial, check out the GitHub repository 

Add more styled components to this library! If you already maintain a React component library, then try adding styled components to your library.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Styling React Components with styled-components

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript