React: Styled Components

I can’t be the only person who starts looking at CSS and my eyes glaze over and my brain gets foggy. I really expected to have CSS just click for me because I have an Art background. I expected to love an organized system to get my projects looking their best. I expected CSS to be the fun part of building projects. Low and behold my expectations came crashing down.

CSS was just not my strong suit. I want to write beautiful code and I love the separation of concerns I see so clearly established with React Components and Ruby on Rails.

CSS for the longest time just felt like a catch all file that was supposed to make everything magically cohesive and beautiful. I couldn’t find a clear way to make everything flow in an organized fashion.

Enter Styled Components!

I was building a SPA with a React/Redux frontend and Ruby on Rails in the backend. I wanted each user to have the ability to personalize their site. When a user created an account, a design was automatically built for that user. [I did this using accepts_nested_attributes_for. I’ll be writing another blog about that later. For now, please reference the Rails Guides for more information.] I wanted the design to be reflected in the overall look of the page. I also wanted the design to be changeable — so every user could personalize the site and make it look unique for them.

To meet these specifications, I could have done inline styling. Personally, I didn’t like this option. As I said, I wanted to maintain a separation of concerns. Through some research, I discovered Styled Components.

Steps to get this working:

First, I installed styled components into my project.

In the terminal, I got into the correct folder *If the front and back end of a project are in the same folder, this must be installed in the frontend only so the package-json is not changed for the backend. This should just be installed for the front end. See below for npm and yarn options.

With styled-components installed, I began by creating a Styles folder. Within this folder, I made files so I could keep styles separated based on how I would use them.

As seen above, this translates to a clear separation of concerns. Moving forward, I can create as many files as needed to make the code easy to read and keep the styled components logically ordered.

For anyone using styled-components in VSCode, I would recommend installing the styled-components-snippets extension. This extension makes the CSS written within the components look like CSS. Visually, this makes it easier to write and understand. By no means is this necessary, but I found it extremely helpful.

Within each Style file, I started by importing styled-components:

Then I created each component as needed. Each component should be written as: export const NameOfStyledComponent = styled.type `` With this, the NameOfStyledComponent should be logical. So for a styled button, it could be called Button. Whatever it’s called needs to be unique because this is how it is imported into other components. For styled.type the type represents the type of element being styled. Using VSCode, a dropdown appeared for me with options. So for my button example, it would look like this:

So now, I’ve created Button, it can be exported as Button from this file and it is known that the element type is a button.

Within the two back tics I wrote the CSS to style the button. This part is just like writing regular CSS (thanks to the styled-components-snippets extension!). I had access to everything that would normally be in a CSS object. With some styling, the code for Button looked like this:

In a component, I imported Button from the appropriate file and then used the Button within the code. Below, please refer to the pictures to see how this looks:

import Button from the correct folder/file

<Button> as compared to <button> written within the code

Difference between the <Button> and <button>

At this point, I was impressed and thought learning about Styled-Components was well worth my time. But….it gets better! From the start, I wanted the ability to have each user personalize the design of their site. My issue with this goal was I couldn’t find a way to communicate information to App.css to personalize the site. With Styled Components, I can pass properties through props!

Back to my styled file and Button. To pass a property and use it through props, I had to write an arrow function to identify the information coming in through props. The code for Button now looked like this:

Using Button and passing in the information looks like this:

And our buttons on the site now look like this:

So, you can pass in any information through props and personalize your styling. In my opinion, all of this is very neat and it makes designing elements easy and implementing those styling choices throughout the project simple. I can use Button in any component simply by importing it and then using <Button> as an element rather than the traditional <button>.

But wait…..there’s more.

My last discovery was implementing pseudoelements, pseudoselectors, and nesting. I haven’t gotten into this too deep, but I have added some nested overrides to my project. These overrides take some sort of action, like hover, and when that is done to the element in question, the styling is adjusted. The code looks like this:

So, with this added to my code, when the mouse hovers over the styled element Button the styling will change.

Putting it all together

My goal is learning Styled Components was to have the ability for users to design and personalize the appearance of their site on my SPA. Expanding on what I explained above with Button, I incorporated styling elements throughout the page that adjust based on props. The user has the ability to change these selections through a form in their settings. The below gif demonstrates the way these changes reflect throughout the site.

There are so many things that can be accomplished using Styled Components. I hope this blog serves as a nice introduction to peak interest and inspire deeper research. Below, I have referenced links from the article as well as other resources I found helpful with this topic.

• Styled-Components Docs
• styled-components-snippets documentation
• Rails Guides: accepts_nested_attributes_for
• Styled Components Full Tutorial —by
  PedroTech- this video was so helpful in breaking everything down! I highly recommend checking it out!