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

If you want to keep things compartmentalized, you could create a .scss file for the specific component you are styling then import it in your component file.

Example:

Folder Structure:

components
|
|--Card
   |
   |--Card.js
   |--Card.scss
   |--index.js
|--Some Other Component Folder 

Card.js:

import React, { Component } from 'react';
import classes from './Card.scss';

export class Card extends Component {

    render () {
        return (
            

                

                    

                        
                    
                
            
        );
    }
}

export default Card;

Card.scss:

.layout {
    img {
        display: block;
        max-width: 372px;
        max-height: 372px;
        height: auto;
        width: auto;
    }
}

.card {
    width: 370px;
    height: 550px;
}

This keeps the styles contained to its respective component.