How to connect CSS files to React components

I recently learned React and realized it's completely different using CSS with React as opposed to vanilla javascript or html.

In React you'll need to import your CSS file into the component you want to style directly.

Let's say this is our CSS file. The goal here is to change the color of the text in our component. Let's assume we will have the class "text" already available.

.text {
  color: green;
}

You'll want to import your CSS file directly into the component you want to style.

import React, { Component } from 'react';
import './Example.css'

class Example extends Component {


    render() {
        return (
            <div>
                <h1 className="text">Hello</h1>
            </div>
        );
    }
}

export default Example;

Cool now our text is green!