Create Components Based on the Style Guide with styled-component

5 min readJun 7, 2021

Previously, we have learned and created our style guide here. Now, I wanna share how I create components for our project using ReactJs styled-components.

In this article, I assumed that you have initiated your React.js project and also installed styled-components. If you haven’t, then you can refer to Creating React JS APP 101 and Styling React with Styled-components that my teammates wrote. Here, I will explore more on how to use styled-components to create components with various design states.

Defining Color Variables in index.css

Our website may have a lot of colors that are used. So that we don’t have to go back and forth looking at the style guide and copying the hex color over and over again for each component we make, we can define color variables in index.css.

Here we also define the font family that will be used throughout the system.

Ok, then how are we gonna use the color? We can just use the color variables like this.

h1 {
    color: var(--orange);
}

Simple! Right? Now we don’t have to make any fuss about copy-and-pasting the hex colors anymore!

Create Components

File Structure

Create a Component folder in src in our root project. For each main components, create a folder inside Components that contains index.js and styles.js . Your file structure should look like this.

File Structure (left). Button components (right)— primary and secondary, with different states — hover, active, disabled

With styled-components, a single component file should be able to create different variations that have similar functionality. For example, if your project have two different buttons, Primary Button and Secondary Button, that have the same shape and state but have different colors, we can group it into Button component. We don’t have to create two separate component for this.

Define the base component in index.js

What are the main elements that are in this component? What are the variations of this component?

In index.js, it will accept props that will determine how my button will look like, what variation it uses. For example, in this component, it will accept props: withIcon, src, and orangeButton, etc. I will explain the usage later.

// Button > index.js
import React from 'react';
import {StyledButton, StyledIcon} from './styles';
function Button(props) { const children = props.children; return (   <StyledButton {...props} disabled={props.disabled} onClick=    {props.handleClick ? (e) => props.handleClick(e) : null} className="btn">     {props.withIcon && <StyledIcon src={props.src} withIcon/>}
     {children}   </StyledButton> 
 )}export default Button;

Define the default styling in styles.js

First, import styled from ‘styled-components’.

Then, define the component. Since it’s a button, then we’re gonna write it:

const StyledButton = styled.button`
  // your styling goes here
`;

Define the default styling. All of my buttons have a certain size and text alignment as the default setting. Also here, my default button has blue color.

// Button > styles.jsimport styled, { css } from 'styled-components';
export const StyledButton = styled.button`
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: 0px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 2px #ADADAD;
  background-color: var(--primaryblue);
  color: var(--white);
  min-width: 150px;
  min-height: 48px;
  padding: 12px 32px;
  outline: 0;  &:hover, &:focus {
    cursor: pointer;
    box-shadow: 0px 0px 4px #ADADAD;
    background-color: var(--primaryblue-darken-1);
  }  &:active {
    background-color: var(--primaryblue-darken-2)
  }  &:disabled, &[disabled]:hover {
    box-shadow: 0px 0px 4px rgba(33, 36, 41, 0.1);
    background-color: var(--gray-1);
    color: var(--gray-2);
    cursor: default;
  }

Using the basic component

For example, you want to add the button to a page. Here’s how to use it.

import React, { useEffect } from 'react';
import Button from '../../../components/Button';export const BukaPendaftaranForm = () => { return (
  <Container className={classes.root}>
     ...
    <ButtonContainer>
      <Button handleClick={submitPendaftaran}>Submit</Button>
    </ButtonContainer>
   ...
  </Container>

it will look like this:

Adding variations to the component

Now, for example we want to add another button that has different color, and with an icon in it. Here, I define orangeButton prop. So if the component has this prop, then it should render an orange button.

Add this lines of code inside the const StyledButton

${props => props.orangeButton && css`
  background-color: var(--orange);
  color: #FFFFFF;
  
  &:hover, &:focus {
    background-color: var(--orange-darken-1);
  }  &:active {
    background-color: var(--orange-darken-2);
  }
`}

Also, I want to define the style if a button has an icon in it. Here, I define it as withIcon prop.

// Button > styles.jsexport const StyledIcon = styled.img`
  ${props => props.withIcon && css`
    margin-right: 12px;
  `}
`

So now when I call a Button component with orangeButton and withIcon and src as its props like this,

<Button orangeButton withIcon src={IconEdit}>Ubah Profil</Button>

it will render:

Yay~

So now we already have multiple variations for the button. Using the same concept, I added some more for my project:

Now you can use this concept for other components too. Hope this helps!

Reference:

https://styled-components.com/docs/basics#adapting-based-on-props