ali5
@ali5

Почему не работают стили в React?

Делаю все как в книге и в ней видимо ошибка и не накладывает стили (импорт подключен)
вот код 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;
    }
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
<div className="todoListMain">
    <div className="header">

.todoListMain.header input {

Это какое-то невероятное позорище, оправданий которому нет. Пробел между .todoListMain и .header куда потерялся? Ну и с остальными стилями косяк тот же.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы