close

How to import a CSS file in a React Component

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to import a CSS file in a React Component in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to import a CSS file in a React Component ?

  1. How to import a CSS file in a React Component ?

    to import a CSS file in a React Component You can import your .css file in .jsx file
    Here is an example –
    import Content from '../content/content.jsx';

  2. How to import a CSS file in a React Component ?

    to import a CSS file in a React Component You can import your .css file in .jsx file
    Here is an example –
    import Content from '../content/content.jsx';

Method 1

I would suggest using CSS Modules:

React

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

Rendering the Component:

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

Method 2

You can import your .css file in .jsx file

Here is an example –

import Content from '../content/content.jsx';

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment