How to connect CSS files to React components
Joelle
Posted on December 6, 2019
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!
💖 💪 🙅 🚩
Joelle
Posted on December 6, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.