Делаю все как в книге и в ней видимо ошибка и не накладывает стили (импорт подключен).
Вот код TodoList.js:
import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.addItem = this.addItem.bind(this);
}
addItem(e) {
var itemArray = this.state.items;
if (this._inputElement.value !== "") {
itemArray.unshift({
text: this._inputElement.value,
key: Date.now()
});
this.setState({
items: itemArray
});
this._inputElement.value = "";
}
console.log(itemArray);
e.preventDefault();
}
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input className="input" ref={(a) => this._inputElement = a}
placeholder="введите задачу">
</input>
<button type="submit">ok</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
}
export default TodoList;
--------------------------------------------------------------------------------------
А вот код TodoList.css
.todoListMain.header input {
padding: 10px;
font-size: 16px;
border: 2px solid #FFF;
width: 165px;
}
.todoListMain.header button {
padding: 10px;
font-size: 16px;
margin: 10px;
margin-right: 0px;
background-color: #0066FF;
color: #FFF;
border: 2px solid #0066FF;
}
.todoListMain.header button:hover {
background-color: #003399;
border: 2px solid #003399;
cursor: pointer;
}
.todoListMain.theList {
list-style: none;
padding-left: 0;
width: 250px;
}
.todoListMain.theList li {
color: #333;
background-color: rgba(255, 255, 255, .5);
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
Простой
