The easiest way to understand this is to see it in action. For the most part, we were pretty smart and safe about how we named our CSS files, but we did run into one giant gotcha: our Divider component defines a global style for all hr tags, regardless of where they appear. Let's head back into src/Todo.js, and change our render function to place an hr tag in between the description and the button:
render() { return ( <div className={this.cssClasses()}> {this.state.description} <br /> <hr /> <button className="MarkDone" onClick={this.markAsDone}> Mark as Done </button> <button className="RemoveTodo" onClick={this.removeTodo}> Remove Me </button> </div> ); }
Note that we have not added any style at all to ...
