How to add CSS to your React Component

Are you stuck on how to make your component take those amazing styles? Worry no more, here we will discuss three ways that will help you implement your beautiful designs. It's good if you have some understanding of CSS and Javascript while reading this article. Let's dive in!

1. Using CSS style sheet.

This involves writing your own CSS styles in a separate file and then importing it into your component.
Remember to use the .css extension when naming the file. Check the example code below.

//Your CSS file

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Import your CSS file to your component.
// You give the CSS file a name of your choice.

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. Using the CSS module

Maybe you do not like the first method, or maybe it does not suit your way of writing code.
You can use our second method. Here you'll also create a separate file where you'll write your CSS but this time with a different extension; the .module.css

// Your CSS module.
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Import the module to your component.

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. Using Inline Styling

One can achieve inline styling using the style attribute style='styles here' However, one has to be careful as whatever goes in the style attribute as a value is not your typical CSS selector but a javascript object, and therefore, it should take the syntax of an object.

This is what I mean;

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Notice the double curly braces, also, note the key: value pair syntax used to write javascript objects.

Something else to keep in mind is that when writing thing properties that have two names for instance background-color one is required to use camelCase backgroundColor

Tip: You can create an object with all your styling code and call it in the style attribute.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Note the absence of double curly braces.

I hope this was helpful and you enjoyed reading it. I welcome feedback so that I improve my article next write. Thank you