How to import CSS files to React JS application?

VS Code by default doesn't autocomplete all file types. If you write import ./Burger/Burger.css or import ./Burger/BurgerIngredient/BurgerIngredient.css in your Layout.js file, your css files will be loaded fine.

If you want to use autocomplete for all files in VS Code, you can use this extension.

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

Without Extension

With Extension

Ok since you confirmed that your ./Layout.css import does not work, you should not name your import when it's about a css file. Doing :

import './myFile.css';

is enough to apply your css.

Note that css is global in React, so you might want to use styled component or encapsulate your css to prevent side effect on other components).

Now, if you really want to add style the way you tried to, there is the style attribute which accepts an object. So you could do:

<div style={{backgroundColor: 'red'}}>Hello World !</div>

Note that the css properties are written in camelCase.

Your file structure appears to me to be...

-Burger
--BurgerIngredient
----Burger.css
--Layout
----Layout.css

Your primary application, from what it appears here, is in /Burger. Considering that, when you type import, you see the dropdown appear, showing helpful suggestions, and it lists...

-../Burger/BurgerIngredient/...

As a possible, valid location. In that case, why don't we try importing css, by typing out...

import burgercss from '../Burger/BurgerIngredient/Burger.css';

Note, for instance, Burger.css wouldn't show up until you select BurgerIngredient, because that's its conntaining folder.