Import CSS in a react app

3
votes

In the create react app documentation it says the App.css is imported in the App.js. Is there also a way to load the compiled css-file from a component?

// MyViewComponent

import styles from '../../App.css';
2
reactjs
Do you mean like, dynamically importing it from inside a component's method? – kingdaro
I left an answer with the absolute basics for using CSS in CRA but the question is a bit confusing on what exactly it is that you're trying to accomplish. A bit more context would be helpful. – KFE

2 Answers

3
votes

You can just import the css file like the below in your component

import './header.css';

Imagine your header.css file looks like 

.header {
    background-color:  rgb(49, 118, 197);
    height:100px;
    border:10px solid red;
}

To use the style, you can use the class like ,

<div className="header">Hello World</div>

Hope this helps :)

1
votes

For css files you can just import them like

import "../../App.css"

which will import all of the selectors & CSS rules within that file.

if you're trying to style individual elements within your component with something like:

<div style={myStyles.wrapper} />

then you'll need to export a JS object from a file

Ex:

export default {
    wrapper: {
       background: "red"
    }
}

then you can import it and use it

import myStyles from "../myStyles.js"

<div style={myStyles.wrapper} />