Getting started with React and styled-components

Hi everyone!

My friend showed me this awesome website called Frontend Mentor that you can work on CSS projects to boost your CSS skills using predesigned challenges that you try to replicate. I loved the idea given that I have this love/hate relationship with CSS.

I thought I'd give it a go but I also thought I'd try implementing styled-components with React to learn some new skills while boosting my CSS ones.

I used styled-components a bit at my internship, but I never started a React project implementing it. I personally like the thought process behind styled-components and think it is extremely useful in large projects where css components could possibly be reused often.

So if you're interested here is a little tutorial on how to get started using styled-components with React. And if you're even moreeee interested you can see the progress with my challenge so far here.

Step by Step

Create your React app

You can just use good 'ol create-react-app

npx create-react-app my-new-app

Or however you would like to create your React app. You can feel free to use tags or anything you enjoy, I happened to add typescript to mine as I'm trying to get better with that as well.

Install styled-components

I'm a big 'ol fan of yarn, but use whatever you enjoy!

yarn add styled-components

or

npm i styled-components

Create components

After all of that installation is done, we can jump into the fun part, making the components!

So the way that styled-components works is essentially you will create a named component that can be a variety of structures.

They will be housed within your typical functional or class component and will use their component name to be called on and displayed.

Here is a condensed example of one of my card classes:

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

const Background = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  width: 100%;
  border: 1px solid grey;
  margin: auto;
  padding: 50px 20px;
  border-radius: 20px;
  border: 1px solid #f2f2f2;
  box-shadow: 1px 1px 1px 1px #f2f2f2;
`;

class CardOne extends React.Component {
    render() {
        return (
        <Background>
            <LeftImage>
            <RightText>
        </Background>
        )
    }
}

export default CardOne;

You can see from above that within the render and return of the class CardOne, we are displaying our Background component.

And above we have declared Background as a styled.div which is essentially a div that is accessing our styled components. We can use styled to create buttons (styled.button), paragraphs (styled.p), you name it.

And within that declared Background variable, we include all of our CSS inside of our component.

So it's a nice way to break down each portion of what is inside of your divs and you can style them all individually or through their parent.

Get fancy

You can even get super fancy with styled-components and write logic inside of the CSS. For example you could have something like this:

const StyledTextField = styled.input`
  color: ${(props) =>
    props.isEmpty ? "none" : props.active ? "purple" : "blue"};
`;

Thanks for following along and I hope that this tutorial could be helpful for anyone starting out with styled-components. Happy coding y'all!

Resources

• styled-components documentation
• Gotta have Smashing Magazine's post on using styled-components
• Introduction to styled-components by Johnson Ogwuru