Using CSS in React: Learn to Style Like a Pro

Heading into my last and final project for my Flatiron School Software Engineering Bootcamp I had one mission.

My goal: to use CSS like a pro!

CSS (or Cascading Style Sheets) is beloved by many, and loathed by many more. For many folks beginning new careers in web development, myself included, there is so much emphasis on delivering functionality. You spend countless hours getting your program or your application to perform the intended use. By the time you get it "working" the styling seems like an afterthought. Am I right?!?

So let's break down some of the myriad of ways a modern, hip, web developer can use CSS to their benefit. Thanks to other developers who have shared their resources through the open source community we can avoid some of the common CSS struggles that have plagued developers in the past.

Here are a few ways you can incorporate CSS into your next React* project:

*I'm currently using Create React App version 16.8.0.

Adding CSS styling "inline" within your HTML elements.
Create a JavaScript object to contain your styling within your React component.
Creating one CSS stylesheet to rule them all and format every aspect of your website from this one file.
Creating separate CSS stylesheets that align with each aspect of your website. You could create a separate stylesheet for each component or each feature.
FINALLY... and perhaps the best of all... you can use existing CSS frameworks! There are countless pre-built front-end components that utilize responsive (mobile-first) grids and layouts.

Inline CSS Styling

One way to get started playing with CSS in your React components is to style them inline. That means to insert a JavaScript style object right into your JSX element tag (<p>, <h1>, etc.).

For this example I've created a React component in "./client/src" called About.js to work in:

function About() {
    return (
        <div>
            <h1>About</h1>
            <p>Are you having so much fun learning how to use CSS within our React components?</p>
        </div>
    )
}

Add some inline CSS to give it some flair:

function About() {
    return (
        <div>
            <h1 style={{ color: "#a35748" }}>About</h1>
            <p>Are you having so much fun learning how to use CSS within our React components?</p>
        </div>
    )
}

Hey look at that, we have a maroon colored header now!

Use a JavaScript object to add styling

If you have more than one style element you would like to add you can also create a JavaScript object outside of the JSX return statement.

function About() {

    const myStyle = {
        color: "#a35748",
        backgroundColor: "#64322d",
        padding: "0.5em"
    };

    return (
        <div>
            <h1 style={myStyle}>About</h1>
            <p>Are you having so much fun learning how to use CSS within our React components?</p>
        </div>
    )
}

Now we have a Rookwood Red background on our header and Volcanic font color!

Create one CSS stylesheet (to rule them all!)

Thus far we have written all our CSS within the About.js file. What if there are other pages and components on our site that we want to also style with these colors?

When generating a new Create React App it comes pre-loaded with a couple CSS files for you in './src':

- index.css

- App.css

If you want to know the difference between the two, check out this article on Stack Overflow.

Let's move our CSS myStyle object up to our stylesheet and put it in our './client/src/App.css' file. Add the following line of code at the top of your App.js file

import './App.css';

Now our stylesheet will get passed down to all other components that are rendered from the top level App.js file.

Since we are not styling within this component we'll move away from inline styling (<h1 style={myStyle}>About</h1>). Let's create a classname for myStyle. Now every time we want to use myStyle we can simply refer to the className="myStyle"

function About() {
    return (
        <div>
            <h1 className="myStyle" >About</h1>
            <p>Are you having so much fun learning how to use CSS within our React components?</p>
        </div>
    )
}

Add a new css class within the './src/App.css' file.

.myStyle {
  color: #a35748;
  background: #64322d;
  padding: 0.5em
}

Let's go add the "myStyle" className to another component. I'll head to my Contact.js page. Add the className on whatever HTML element you want to share the same styling (the <h1> in this case).

function Contact() {
    return (
        <div>
            <h1 className="myStyle">Contact</h1>
            <p>Reach out if you have any questions.</p>
        </div>
    )
}

so cool!

Separate CSS stylesheets

Let's say our App.css file is starting to get really long and clunky. We are good developers and we want to keep our code DRY (Don't Repeat Yourself). Let's say for example that we have added some pretty rad styling on our buttons. Let's pull the CSS for our buttons into its own React component. Say, what? Yes, we can add a stylesheet just for our Buttons! Then on every page within our application that we want to add button styling we can import the button styling within that page. I recommend heading to the documentation on styled-components.com where you can learn straight from the source.

CSS frameworks

Thanks to the amazing developers who have gone before us, we can turn to CSS Frameworks. These are existing repositories of responsive styling that can so a lot of the "heavy lifting" of CSS for us. With the click of a few keystrokes or punching a few buttons we can have a whole library of customizable CSS components at our fingertips. Here are a few of my favorites:

Bootstrap - arguably the most popular!

In addition, there's great documentation on using React-Bootstrap.

Semantic UI - easy to use but more limited in comparison to Bootstrap.
Material UI - a framework specifically for React
styled-components - more basic but easy to use if just getting started

Perhaps it's wishful thinking, but hopefully with a little practice you'll begin to love CSS as much as I do!

Search This Blog

Morgan Hobbs