Global stylesheet problem in React

1

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

src/
├── 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.

2

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.

<App>
...
<AddTodo />
...
</App>
3

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.

4

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

5

What was the problem anyway ? :slight_smile:

6

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.

7

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