Часть 7. Добавление базовых стилей CSS
Теперь, что касается стиля наших компонентов, мы по-прежнему используем CSS, но в этом коде CSS нет ничего слишком специфичного для React. В конце концов, мы можем просто добавить новый файл CSS. И обычно для кода CSS данного компонента вы добавляете этот файл рядом с файлом JavaScript компонента, и здесь это будет файл ExpenseItem.CSS.
Затем вы хотите написать туда свой код CSS, но, поскольку это не серия статей по изучению CSS, я не хочу утомлять вас написанием большого количества кода CSS, поэтому ниже вы найдете суть ExpenseItem.CSS, которую вы можете просто скопировать. код и вставьте в свой файл ExpenseItem.CSS.
Вернувшись к ExpenseItem.js, нам нужно сделать одну важную вещь. Нам нужно сделать этот общий процесс сборки осведомленным об этом файле CSS и сообщить ему, что код CSS должен быть рассмотрен и должен быть введен в готовое приложение, потому что по умолчанию он не просматривает все ваши файлы и автоматически включает все, что у вас явно есть сказать React, вы могли бы сказать, или этому процессу сборки, что следует учитывать определенный файл.
Для ExpenseItem.js мы сделали это с помощью этого импорта и приложения JS.
Для расходаItem.CSS нам нужно сделать это внутри ExpenseItem.js, где мы просто импортируем ./ExpenseItem.CSS просто так. Это просто сообщает процессу сборки, что следует учитывать файлы CSS.
Теперь внутри этого файла CSS я, в конце концов, только что подготовил кучу классов CSS, которые можно добавить к элементам, чтобы придать им определенный вид, и на данный момент они находятся в этом HTML-коде в ExpenseItem в нашем компоненте, нам нужно добавить эти классы.
Например, на обертке div здесь. Здесь есть одна особенность. Мы вводим здесь не класс, как в обычном HTML, а вместо этого className. И это может быть странно, но вы должны иметь в виду, что это не настоящий HTML.
Это похоже на HTML, но это особый синтаксис JSX, изобретенный командой React. И, в конце концов, под капотом это все еще код JavaScript, поэтому большинство атрибутов одинаковы, но не все.
И здесь атрибут class был переименован в className, потому что class является зарезервированным словом в JavaScript. Технически это все равно будет работать, если вы будете использовать class здесь, но следует использовать className.
Теперь здесь, в этом общем div, который охватывает все, мы затем добавляем сюда класс статьи расходов. К этому div, который содержит наш заголовок и нашу сумму, мы добавляем еще один из className, который является Cost-item__. Итак, здесь мы получили два символа подчеркивания. . Описание.
И затем здесь, в этом div с суммой, мы просто добавляем className, а затем расход-статья__цена. И если вы сейчас все сохраните, это должно выглядеть так, что определенно приятнее.
Вот как легко добавить стили к вашим компонентам React. Это действительно не слишком красиво. Вы должны знать, что это className, а не class, но в остальном это просто стандартный код CSS, который затем добавляется к вашим элементам. И в этом коде CSS вы можете использовать все известные вам селекторы.
Этот импорт может быть самым странным в конце концов, потому что он необходим, чтобы весь проект знал об этом файле CSS. И вот как мы можем стилизовать наши компоненты.
Ссылка на репозиторий github Expense Tracker
Поддержите меня
Дорогие прекрасные читатели, если вы станете платным участником Medium, используя ссылку, приведенную ниже, тогда Medium будет платить мне половину вашего членского взноса, который будет составлять 2,5 $ в месяц. Заранее спасибо.
Дополнительные материалы на plainenglish.io
