A Beginner’s Guide to React styled-components

I was working on a personal project recently and wanted to style some of my components. Since react components don’t have built in styling, I researched a few ways to add styling to my website and found out about styled-components. Styled-components is a React library that allows developers to add styling directly to React components. It’s super handy since it removes the need for separate CSS files and makes it much easier to make your website look great!

Photo by Ashley Piszek on Unsplash

This week I’m going to go over some basics of React styled-components so that you all can learn a bit about this great tool. First thing’s first, since styled-components is a React library we need to install it. We can do this via the npm or yarn package manager by typing this command in the command line:

for npm:
$npm install --save styled-component
Or for yarn:
$yarn add styled-components

Once we have our library installed the styled-components documentation recommends that we add a resolutions field to our package.json to avoid any versioning issues. The resolutions should look like this as per the documentation:

{
"resolutions": {
"styled-components": "^5"
}
}

Now that we have everything set up, we can start styling some components. Styled-components uses template literals to create styles for components. More on those can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals. In short, template literals in JavaScript are string denoted by backticks (`) instead of quotes. Unlike regular strings, template lierals allow you to embed functions inside of them, which makes them useful for embedding text in other languages, such as CSS in a JS file. Let’s say we have a component that displays a simple header with some text beneath like so:

export default function MyPage (){
return(
<h1>My Title</h1>
<p>Hello, this is my example component. I think it’s pretty cool.</p>
)
}

We want to spiff up our webpage for the holidays and have the title be red, and our text bellow to be in a green box. Using styled-components we are going to create template literals for that styling. Since we are styling two things, our title and our text bellow, we’re going to make two template literals, once for each style component. Here’s what those might look like:

const Header = styled.h1 `
font-weight: bold;
color: red;
`;
const Backing = styled.p `
padding: 6em;
background: green;
`;

As you can see we are setting our literals equal to variables. Inside each template literal we have regular css components like font-weight and background. We can then render those styles in our component, and bam we have a red and green page for the holidays!

export default function MyPage (){
return(
<Header>My Title</Header>
<Backing>Hello, this is my example component. I think it’s pretty cool.</Backing>
)
}

We can type our template literals in the same file as our component, so they are in effect attached to that component and we don’t need a separate CSS file. We can also do cool stuff like changing the styling based on props or extending styles via inheritance. I’ll go more into depth about that in a different post, but for now feel free to explore the documentation and try out some styling of your own!

Here’s a like to the styled-components documentation:

styled-components: Documentation