I am struggling to understand how to implement CSS with React. I have tried using inline styles but couldn't get it to work. Additionally, I am unsure where to apply CSS in my JSX code within the react class.
For example, in one of my react classes, I have the following code:
render: function() {
return (
<div>
<h1> Todos </h1>
<form className="todoForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Enter task"
value={this.state.text}
onChange={this.handleChange}
/>
<input
type="submit"
value="Submit todo"
/>
</form>
<h4> List of todos: </h4>
<ToDoList deleteItem={this.deleteItem} listItems={this.state.submittedValues}/>
</div>
);
How can I style the input box in the form to have a green background or make the <h1> heading font blue? In CSS, I would simply link a CSS file to HTML and write: h1 { color: blue };. However, I am unsure how to achieve this in React.