5.3 - Styled Components

What Are Styled Components?

Styled components is an npm package that utilizes ES6 & CSS in JS files to easily style React applications. Check out their awesome docs here.

Styled components tend to be used inside of React files to keep styling together with the logic, in an organized and friendly way. This an awesome combined resource for all things styled components here.

Even though we already have SASS set up, it's important for you to get a good dose of styled components. To get used to styled components, we're going to use them to style every part of our little movie application. For an extra challenge in the future you can feel free to restyle them as you wish.

The first thing we need to do to use them is to run npm install --save styled-components.

This is what we're going to go through making, then you can feel free to change anything into your own!

lionking

Purpose

Instead of styling things in separate CSS or SCSS files, we can utilize CSS within the JS file. Mind you, this is not inline styling, but a more organized way of doing things. For example, usually all of the styles for that component will be at the top of the file, before your component itself. Let's start by jumping into an example of styled components.

Starter Example

Let's first go to our MovieApp component, our parent component. We're not going to need much styling here, but we can go ahead and do a little bit to get started to get us used to the idea. The first thing we need to do is import our styled components:

import styled from 'styled-components';

Now that we have access to the package, let's look at how they work. What we're going to style here is our whole wrapper for our movie app. So we can start by writing the following:

const Wrapper = styled.div`
  background: #dbdbdb;
`;

To use our styled components inside of our components, we write them similarly to how we would call a react component. Let's look at our current code where we call the <Form /> component:

return (
    <div className="main">
        <div className="mainDiv">
            <Form />
        </div>
    </div>
);

Changed Code

Now, to use our styled components we're going to call it like this:

return (
    <Wrapper className="main">
        <div className="mainDiv">
            <Form />
        </div>
    </Wrapper>
);

We're creating a Wrapper that is a styled div element. Notice in the styled.div that we use the 'styled' package with any real kind of html(JSX) tag. You can style divs, inputs, p tags, h2s, etc. Inside of this structure, we can put any of our normal CSS styling. Here we've just gone ahead and picked a background, you can change this to be whatever you like.

We simply replaced our div text, with our styled component. Now, when you save, you should see the background of your movie app is your new background color!

Form Component

Let's continue with Form component. Start by importing styled components again, like before. This time, in our Form component we want to style an input. So we're going to start off with this format.

const SearchInput = styled.input``;

Inside of the backticks is where we can start styling our input. We've styled it like below, but feel free to change the color, or anything you'd like to do in the future. Start off by making sure your styled component looks like the one below:

const SearchInput = styled.input`
  margin-top: 10px;
  width: 250px;
  margin-bottom: 10px;
  padding-left: 10px;
  color: gray;
`;

Next, we need to use this styled component in our React component. We can simply replace our input with our new SearchInput.

 return (
    <form onSubmit={this.handleSubmit} id="form">
        <SearchInput onKeyUp={this.handleKeyUp} id="searchInput" className="searchBar" type="text" placeholder="Search a movie" required />
        <FormResults results={this.state.results} />
    </form>
);

Now, you should see your new nicely styled search input. Hopefully you're starting to see how organized this approach is, with keeping everything for your component in one file.

FormResults

Next, let's go to our FormResults component. In this component we have a few things that we need to style. Start by importing styled components like usual.

The first thing we're going to style is our ul. Let's call our styled component MovieList. When naming styled components, try make the name useful and relevant towards what you are styling. Start your MovieList like follows:

const MovieList = styled.ul`
`;

Now, let's start by styling it our way, then feel free to add your own personal touches and make it better later.

const MovieList = styled.ul`
    list-style-type: none;
    width: 100%;
    margin: 5px;
`;

Next, let's style our lis. Let's call these Movie since each list item is a movie. Start it like below.

const Movie = styled.li`
`;

Again, we're just putting regular CSS in our styled components. We used a cool gradient because we wanted to, but you can just do a simple background if you prefer.

const Movie = styled.li`
  padding: 5px;
  margin: 5px;
  background: #06beb6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #48b1bf, #06beb6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 260px;
  height: 500px;
  float: left;
  list-style-type: none;
  text-align: center;
`;

The last two things we want to style is our image, to make them all the same size, and the text, to make it nicer to read. Go ahead and add the components below:

const MoviePoster = styled.img`
    width: 250px;
    height: auto;
    max-height:375px;
`;
const Title = styled.p`
    font-size: 1.4em;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: .9;
`;

That should be the end of our styling needed for this component. All of your styled components should look like the following code:

const Movie = styled.li`
  padding: 5px;
  margin: 5px;
  background: #06beb6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #48b1bf, #06beb6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 260px;
  height: 500px;
  float: left;
  list-style-type: none;
  text-align: center;
`;

const MovieList = styled.ul`
    list-style-type: none;
    width: 100%;
    margin: 5px;
`;

const MoviePoster = styled.img`
    width: 250px;
    height: auto;
    max-height:375px;
`;
const Title = styled.p`
    font-size: 1.4em;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: .9;
`;

Adding styled components to FormResults

Now, we need to use them in our react component. This is what our whole react component should look like.

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

const Movie = styled.li`
  padding: 5px;
  margin: 5px;
  background: #06beb6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #48b1bf, #06beb6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 260px;
  height: 500px;
  float: left;
  list-style-type: none;
  text-align: center;
`;

const MovieList = styled.ul`
    list-style-type: none;
    width: 100%;
    margin: 5px;
`;

const MoviePoster = styled.img`
    width: 250px;
    height: auto;
    max-height:375px;
`;
const Title = styled.p`
    font-size: 1.4em;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: .9;
`;

const FormResults = ({results}) => {
    const link = 'https://image.tmdb.org/t/p/w300';
    const resultsFormatted = results.map((element, index) =>
        <Movie key={index}>
            <MoviePoster src={results[index].poster_path === null ? 'http://via.placeholder.com/250x350' : `${link}${results[index].poster_path}`} alt={`${results[index].title} poster`} className="resultPoster" />
            <Title>{results[index].title}</Title>
            <p>Released: {results[index].release_date}</p>
        </Movie>
        );
    return (
        <MovieList id="results">
            {resultsFormatted}
        </MovieList>
    );
}
export default FormResults;

Closing thoughts

While the styling in this file was pretty long compared to the React part itself, it's still nice because it's all inside of the one file, so we know if we need to style anything relating to FormResults. We don't have to search for the correct CSS location, it's all inside of this file. It's also nice because instead of just ul, we see MovieList which is a nice indicator for what we are actually doing.

Feel free to incorporate styled components into any of your React projects, or to continue to use CSS. Different companies use different approaches, but it's useful to be exposed to as many as possible.