Блог

Я смущен о том, как должна быть структура папок в реагировать , я просто импортировал индивидуальных стилей отдельных элементов, но в первую очередь я получаю is defined but never used в консоли , а во-вторых я получаю 2 кнопки, хотя я просто добавил одну кнопку, и, кажется, с том же стиле, в addcontact.css котором я никогда не добавляется к моему ContactList.js , что на самом деле происходит ? использование реквизита возвращает элементы со стилями ?!

Структура папок

addcontact.css

 button{
  display: flex;
  align-self: flex-start;
  width: 5rem;
  justify-content: center;
  height: 2rem;
  align-items: center;
  text-align: center;
  border-radius: 1rem;
  border: none;
  background-color: crimson;
  color: white;
  box-shadow: 1px 1px 3px 1px black;
}
 

ContactList.js

 import React from 'react';
import contactlist from './styles/contactlist.css'
const ContactList =  (props) => {
    const renderContactList = props.contacts.map(contact=>{
         return(
             <div className="item">
                 <div className="content">
                     <div>
                     <div className="name">{contact.name}</div>
                     </div>
                     <div>
                     <div className="mail">{contact.email}</div>
                     <button>Delete</button>
                     </div>
                 </div>
             </div>
         );
    });
   return(
         <div className="celled-list">
             {renderContactList}
         </div>
   );
}
export default ContactList;
 

AddContact.js

 import React from 'react';
import addcontact from './styles/addcontact.css';

class AddContact extends React.Component{
  render(){
      return(
             <main>
                 <h2>Add Contact</h2>
                 <form>
                     <div className="field">
                         <div className="Name-container">
                         <label>Name</label>
                         <input type="text" name= "name" placeholder="Name" />
                         </div>
                         <div className="email-container">
                         <label>Email</label>
                         <input type="Email" name= "Email" placeholder="Email" />
                         </div>
                         <button>Add</button>
                     </div>
                 </form>
             </main>
      );
  }
}
export default AddContact;
 

Попробуйте просто импортировать его без as, вот так:

 import './styles/contactlist.css';
 

Вы пытаетесь использовать синтаксис модуля css с обычной таблицей стилей css.

Вы не используете переменную, созданную при попытке импортировать таблицу стилей css, поэтому вы получаете сообщение об ошибке «определена, но никогда не использовалась».

Как уже говорилось в предыдущем комментарии, просто импортируйте всю таблицу стилей, не объявляя ее переменной.

Ознакомьтесь с документацией CRA для получения дополнительной информации здесь.