Global stylesheet problem in React

I’m working on a React app whose structure looks like this:

├── App.css
├── App.js
├── App.test.js
├── components
│   ├── AddTodo.js
│   ├── layout
│   │   └── Header.js
│   ├── TodoItem.js
│   └── Todos.js
├── index.js
├── serviceWorker.js
└── setupTests.js

The problem I’m facing is that I can’t seem to apply styles through my App.css to the AddTodo.js component. I’m new to React so maybe I’m missing something.

Any help is appreciated, thanks.

Did you import App.css into AddTodo component or root component which is directly/indrectly parent of AddTodo component ?

if you want to call it from AddTodo.

import '../App.css' 

or from App.js

import './App.css'

in this case, AddTodo must be within App component.

<AddTodo />

Yes I did. App.css is imported in App.js. I’ve also tried importing it in AddTodo.js but didn’t make any difference.

Never mind, I found the problem… thanks anyway! :slightly_smiling_face:

What was the problem anyway ? :slight_smile:

So silly that I feel like an idiot: I previously applied inline styles in JSX, and guess what happened when I copy pasted them in App.css.

Don’t worry, we all make the same mistakes :slight_smile: