How to apply CSS and Styling to a React component

Question

I have been looking, however, I have had little luck finding any way to style the React.js file that I have created, I converted it from a standard web page, so I have the o

Answer 1

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. Let me explain with an example.

Hero.jsx

import "./Hero.scss";

import React, { Component } from "react";

class Hero extends Component {
  render() {
    return (
      

        Scss is awsome.
      
    );
  }
}

export default Hero;

Hero.scss

.hero-component {
    .hero-header {
        
    }

    .other-class {}
}