Style Components React

How to Style React components

In the previous lesson, we have created a React component that displays a recipe of Taco Slaw with an image. Let’s review its file structure to understand where we need to put our CSS file(s).

For the sake of simplicity, we will create a file ‘style.css’ in the root directory. You can create a separate folder to hold all your style sheet files.

React Project Files

Open the style.css and copy-paste the following code.

.box{
  border:1px solid #ccc;
  padding:20px;
  margin:20px;
  width:500px;
 font-family:'arial';
 color:grey;

-webkit-box-shadow: 1px 3px 14px 4px rgba(163,160,163,1);
-moz-box-shadow: 1px 3px 14px 4px rgba(163,160,163,1);
box-shadow: 1px 3px 14px 4px rgba(163,160,163,1);
}

Import the Style Sheet

To import stylesheet file into MyApp.js add:

import style from '../style.css'

The third and last step is to add a class box to the container <div>

function MyApp() {
    return ( <div class = "box">
        // your component’s code goes here.
        </div>
    )
}
export default MyApp

This will work but will show an error in the web browser’s console area.

DOM error

The <div class="box"> may look like an HTML but it is JSX – an extension of JavaScript. Class is a reserved keyword in JavaScript, which makes it forbidden to use for styling purpose.

React 15 will warns and ignores the use of class keyword for styling. React 16 warns but converts the value to a string.

Facebook recommends using className instead of class.

<div className="box">

React is using JSX but the truth is, underneath it is using the vanilla Javascript DOM API. If you have ever used Javascript DOM API, you must be familiar with something like

document.getElementById('div_id').className + = "new-class-name"

className is an underline Javascript DOM API property. So, whenever you have to use class in the JSX element, use className instead.

Inline CSS in React

The second method you can use to style your components is by using the inline CSS. You can write the CSS rules as attributes and passed to elements.

In React, inline styles are not treated as strings. Instead, the style attribute accepts a JavaScript object. You can create a variable to store the style properties and then pass it to the JSX element, or you can pass it directly.

Let’s say; you want to change the color of the heading. Declare a variable redheading that stores the CSS style rule.

const redheading={color:'red'}
<h2 style={redheading}> Taco Slaw </h2>

This may seem like an easy way to change the style, but again, the first convention of programming suggests to keep everything separate.

The above piece of code is similar to:

<h2 style={ { color:'red' } }> Taco Slaw </h2>

Use inline CSS only when you are sure about what you are doing. Now, putting all things together, we will have the following code for App.js

import React, {
    Component
} from 'react'

import image01 from '../tacoslaw.jpg'

import style from '../style.css'

const redheading = {
    color: 'red'
}

function MyApp() {
    return ( <div className = "box"
        <h2 style = {
            redheading
        } >Taco Slaw</h2>

        <img src = {
            image01
        }/> 
          <h4>Ingredients</h4>

        <ol>
        <li> 1 / 2 small head cabbage, chopped </li> 
        <li> 1 jalapeno pepper, seeded and minced </li> 
        <li> 1 / 2 red onion, minced</li> 
        <li> 1 carrot, chopped </li> 
        <li> 1 tablespoon chopped fresh cilantro </li>
        <li> 1 lime, juiced</li> 
        </ol>

        <h4 > Directions</h4> 
        <p> In a bowl, mix together the cabbage,
        jalapeno pepper, red onion, carrot, cilantro,
        and lime juice. </p>

        </div>
    )
}
export default MyApp

Styling in React

Try to change the color of the sub-heading, or style list, using the inline CSS, external style sheet as well to see what works best for you.