Stylish Components

This article is about Styled Components, a way to break out HTML elements and their corresponding CSS styles into reusable components. You can read more about the benefits of using Styled Components here.
The focus will be on incorporating these components we made into React. As such, this article will have two parts:

1. Creating a React project from scratch and then adding Styled Components to it
2. Taking an existing React project with basic HTML/CSS and converting the elements to Styled Components

Ok, so for the first part, I’m going to create a new React project in VSCode. If you’re not sure how to do this, you can refer to the beginning of this article on how to get started and test that everything is working.

Once I’m all set up there, I’ll go ahead and install Styled Components.

npm install --save styled-components

dash dash

The first thing I want to do here is to navigate to src/App.js and remove the HTML elements they include with the React installation. So my App.js file should look like this:

Just those two lines are all we need to start.

Second, I’ll want to navigate over to src/App.css and remove all the CSS properties. I’ll be starting over. It should look like this:

Right-click, delete.

I’ll make a new file to put my styled-components into.

Clicked new file, named the file ‘StyledComponents.js’, opened ‘StyledComponents.js’.

I’ll then import styled into my StyledComponents.js.

‘styled’ will be all we need from the styled-components library but later we’ll use ‘keyframe’ also.

Next, we can add TestHeader in StyledComponents.js and export it for testing within my App.js.

Name variable, call styled, pick an element, place styles between backticks. That’s the basics.

I’ll:

1. Save this component
2. Name this component
3. Call the imported styled from styled-components
4. Pick an element to build this component with
5. Define how this element will look using CSS
6. Export the component when I’m done

After we’ve created TestHeader, I’ll want to import it into my App.js and add it into my App component.

Import component and then add the component to the return to see it.

1. Import component using the same name I exported it as from the same file it was created in
2. my component acts in the same way as the element it was created from would

O hey, Style Component, I wasn’t sure if I’d run into your here.

That’s it, that’s the basics of using Styled Components.
Now I’ll take an existing React app and convert its existing styles into Styled Components.
First, I’ll create a new React project in VSCode. If you’re not sure how to do this, you can refer to the beginning of this article on how to get started and test that everything is working. Then as before, I’ll go ahead and install Styled Components. You already know what this should look like from the first part of this article.
After creating and setting up the React app, I’m going to create a new folder for my styled-components to reside, create a styled component, and then export it.

Test everything.

Then I’ll import TestComponent into my App.js to test that everything is properly installed and connected.

Just above the image.

Then after importing my test component into App.js, if everything is work properly, I’ll see my message sprawled across the screen just above the revolving atom.

Thanks, pal.

Now I’ll take stock of everything I’ll need to make a component for in App.js. Basically, every HTML element, and I’ll name the components after their class names.

I didn’t count <code> on line 14.

1. <div> element with className=”App”
2. <header> element with the className=”App-header”
3. <img> element with the className=”App-logo”
4. <p> element
5. <a> anchor tag with the className=”App-link”

I’ll start off by creating a styled component for each

You can have an empty component. AppMessage will actually stay empty. You can always add later.

From here I’ll copy the styles from CSS into their appropriate components. It was cut off in the picture below but the import should now look like this:

import styled, { keyframes } from 'styled-components';

Almost a strict copy and paste except for the media query and animation.

Then I’ll import them into App.js replacing them with their respective elements. Refer to the numbered list above to see what the components we imported replaced. We’ll also need to import
{ keyframes} from ‘styled-components’ in our StyledComponents.js, which I mentioned above already.

I personally think this looks much cleaner than HTML and makes clearer the role of each element.

Notice that little else besides the names of the elements has changed within the App.js file. The <img /> is still self-closing and has all the same properties despite it now being called AppLogo, I removed the <code></ code> on line 18 for no particular reason, and our <a></a> now called <AppLink></AppLink> still has all of it’s properties as well. After I check my App, everything is working just the way it did before except now it is running off of Styled Components.

And no one was the wiser all the machinations at work just behind the door.

Before I close this project, I will delete my arc/app.css file because it is now redundant and I will be sure to remove the app.css import from my app.js. After I refresh my app, everything is still working.

Styled Components can be a lot of fun as it removes some of the tediousness of HTML and CSS when working on an app. I recommend experimenting with <StyledMessage> a bit and then seeing if you can change the background color of App.js with Styled Components. If you like this article, want to know more, found any discrepancy, or just wanna chat, feel free to shoot me a message on LinkedIn or drop a comment. Thanks for your time.