[I 7 - Styling the App] -- cannot get styling to work

[JESii]

For some reason, I can't seem to get styling to work: I've added the className to the App/button

<button className="add-note" onClick={this.addNote}>+ Add Note</button>

and I've added the style to main.css:

.add-note {
  background-color: #fdfdfd;
  border: 1px solid #ccc;
}

but everything stays the same.

Must be something I'm missing...

[bebraw]

Can you push your project on GitHub so I can have a closer look?

[JESii]

done; https://github.com/JESii/survivejs-kanban-app.git Thanks

[bebraw]

There are two options:

1. Set appearance: none; to override default button styling.
2. Replace button with span.

I found this article that provides more ideas.

[JESii]

Well... very interesting; the styling that you offer in the book and that I was providing actually WAS working -- it just didn't make any difference to what was already showing.

When I changed:

.add-note {
  background-color: #fdfdfd;
  border: 1px solid #ccc;
}

to

.add-note {
  background-color: #fdfdfd;
  border: 1px solid blue;
}

then it became clear that the styling actually worked - blue border around the button.

I would suggest that in that section, just before "7.2 Styling Notes", you make a change so that the styling is clearly visible... maybe a font-size change?

[bebraw]

Yeah, could be. 👍