Tại sao cần dùng Redux: • Tại sao cần dùng Redux...
Source code: github.com/lpr...
CSS
*** App.css
/* Todos */
.todo-list ul {
padding: 0 10px 10px 10px;
list-style-type: none;
}
.todo-list li {
padding: 10px;
cursor: pointer;
margin: 10px 0;
border-radius: 4px;
background: rgb(240, 240, 240);
color: black;
}
.todo-list li input[type='checkbox'] {
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
transform: scale(2);
padding: 10px;
float: right;
}
.todo-list li.completed {
background: rgb(119, 218, 243);
}
.todo-list li button {
float: right;
margin-right: 20px;
}
.todo-list li button:hover {
cursor: pointer;
background: red;
color: white;
}
/* Navbar */
.navbar {
padding: 5px;
text-align: center;
background: rgb(240, 240, 240);
color: black;
}
.navbar ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
}
/* TodoForm */
form {
padding: 10px;
}
input[type='text'] {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin: 6px 0;
border: 0;
}
input[type='submit'] {
margin: 10px auto;
padding: 10px;
border: 0;
display: block;
}
*** index.css
.App {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: rgb(219, 219, 219);
margin: 20px auto;
width: 90%;
max-width: 800px;
}
Негізгі бет Hướng dẫn Redux (kiểu mới) - Tập 2: Làm quen và thực hành với Action - Reducer
Пікірлер: 7