Стилизация и CSS
Совет
Если вы часто пишете похожий код, то пакет classnames поможет упростить его.
Можно ли использовать встроенные стили?
Встроенные стили — это плохо?
CSS-классы, как правило, лучше для производительности, чем встроенные стили.
Что такое CSS-in-JS?
«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах.
Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css , как вы ранее привыкли это делать, а затем указать нужные классы с помощью className .
Можно создавать анимации в React?
React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group, React Motion, React Spring или Framer Motion.
Изучаем JavaScript
Теперь мы можем в JSX добавлять элементам классы, которые присутствуют в Bootstrap, и элемент будет стилизоваться так, как это предполагают стили Bootstrap. Важно не забывать, что вместо class в куфле используется свойство className.
Но что, если мы хотим изменить классы Bootstrap и добавить элементам собственные стили?
Можно в папке publiс проекта создать файл main.css, подключить его в index.html и там писать стили, но если проект большой и стилей много, этот подход не самый оптимальный.
Предпочтительнее для каждого компонента добавить собственные стили, поместив их в папку components и дав точно такое же название, как и файлу с кодом компонента, только с расширением .css.
Эти файлы мы импортируем в js:
import ‘./TodoList.css’;
Такой импорт возможен только благодаря тому, что для сборки проекта используется вебпак, который умеет обрабатывать не только js, но и css.
- Получить ссылку
- Электронная почта
- Другие приложения
Архив
- setState() — удаление элемента
- Собственная система событий
- State — состояние React компонента
- Обработка событий
- Классы в React
- Структура React-приложения Ч2.
- React. Как подключить css
- Массивы как свойства компонентов react
- Props — свойства компонентов
- Структура React-приложения
- React. JSX
Показать больше Показать меньше
Ярлыки
Показать больше Показать меньше
Популярні записи
Как связать папку на компьютере и репозиторий на github
На гитхабе есть репозиторий https://github.com/irinainina/codewars На компьютере папка codewars Задача: связать папку и репозиторий, чтобы изменения в папке (добавление или удаление файлов) отображались в репозитории Решение 0. Открываем Git Bash 1. Склонировать репозиторий $ git clone https://github.com/irinainina/codewars Клонирование В результате на рабочем столе появилась папка codewars 2. Перейти в эту папку $ cd learn.javascript.ru Или зайти в папку кликнув по ней мышкой и внутри папки открыть Git Bash 3. Проверить текущий статус $ git status 4. Добавляем в папку нужные файлы, удаляем ненужные 5. Отследить изменения (точка в конце обязательна) $ git add . 5. Закоммитить изменения $ git commit -m . или $ git commit -m «пишем, что изменили, чтобы не запутаться» 6. Залить изменения на гитхаб $ git push -u origin master Результат Было Стало
Работа со скриптами. Урок 02. Создание слайдера
Скрипт слайдера мы скачали в прошлом уроке командой $ bower i slick.js Также его можно найти в Google — первая ссылка по запросу slick http://kenwheeler.github.io/slick/ Преимущества слайдера: — поддерживает touch events — можно просматривать с телефона, листая пальцем — поддерживает responsive — можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному Хорошая практика — подключение скриптов из папки bower_components Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются. Что касается стилей, которые находят
Как изменить язык репозитория на гитхаб
Вопросы о том как указать язык репозитория на github время от времени появляются в сети, например Как сменить язык git-репозитория?, Как изменить язык программирования у репозитория GitHub?, Гитхаб неверно определяет язык репозитория По первым двум ссылкам вместо ответов почему-то рассказывают, что менять язык не нужно, даже если он определяется неверно, а по третьей рабочий способ описывается запутанно и не особо понятно. На самом деле язык меняется в несколько кликов. Приведу пример для JavaScript, остальные меняются аналогично. Открываем Блокнот, копируем в него две строки: * linguist-vendored *.js linguist-vendored=false Сохраняем с именем .gitattributes (точка вначале нужна) Загружаем файл в репозиторий, в котором нужно сменить язык Результат. Обратите внимание что язык репозитория JavaScript 30 определяется как HTML из-за того, что js-код лежит внутри файла index-html Было Стало Решение нашла здесь stackoverflow.com
React-приложение Прогноз погоды на 5 дней
Приложение, которое показывает прогноз погоды на 5 дней для определённого населённого пункта. 1. Регистрируемся здесь https://openweathermap.org/forecast5 На почту приходит API key 2. Создаём приложение my-weather-app Для этого выполняем команду create-react-app my-weather-app 3. Создаём компонент WeekContainer import React from ‘react’; class WeekContainer extends React.Component < render() < return (
Hello World!
) > > export default WeekContainer; 4. Добавляем компонент WeekContainer в App import React, < Component >from ‘react’; import ‘./App.css’; import WeekContainer from ‘./WeekContainer’; class App extends Component < render() < return (
); > > export default App; 5. Для по
Сodewars лайфхаки
1. Как увидеть с какими аргументами запускаются функции в проверочных тестах? Просто верните этот аргумент function isValidIP(str) < return str; >2. Как узнать какие ката уже пройдены, какие нет Для кат. которые ещё ни разу не проходились, будет написано Train , если кату уже пытался решать – Train Again . Если ката уже решена вами, под катой есть надпись View Solutions , и на странице решений можно посмотреть своё – My Solutions . Если ката не решена вами, надпись будет Unlock Solutions . Кроме того, решённые и нерешённые каты можно увидеть в своём профиле вкладка Solutions 3. kata scan Быстро увидеть пройденые ката из списка позволяет сайт https://auseika.github.io/kata-scan/ В левое окно копируем список ката и свой юзернейм из адресной строки codewars В правом окне появляются отметки о решённых и нерешённых ката
Добавить hover-эффект svg background
Демо: https://codepen.io/irinainina/full/gXpRZB/ Код: https://codepen.io/irinainina/pen/gXpRZB Как изменить цвет svg-изображения при наведении, если svg добавлено в качестве фона через background-image. Все известные мне источники утверждают, что это невозможно. Ни одного решения данного вопроса (а задают его достаточно часто, например: Как заменить заливку svg при hover? SVG игнорирует hover, как его заставить работать? ) найти не удалось. Все предложенные решения Css SVG hover color ; How do I make an SVG image change color when hover предлагают или вставлять svg в html, что выглядит не очень хорошо с точки зрения понятности, читаемости, лаконичности html-кода, или использовать два svg с разным цветом для разных состояний элемента, но это лишние файлы и при наведении иконки меняются не мгновенно, может быть заметная задержка, когда изображение исчезает, а потом появляется другого цвета, а это, очевидно, не тот эффект, на который мы рассчитываем. Тем не менее, решение ес
Смена цвета у svg иконки при наведении
html css img:not(:hover) < transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); >img:hover < transition: 1s; >Демо Источник
Как правильно подключить css файлы в reactjs / nextjs?
Для разработки использую nextjs. Из коробки использует module.css. Я не хотел его использовать т.к. работа посадка верстки с ним не очень удобная для меня. Искал решения как от него избавиться.
Нашел решение подключить стили глобально. Правильно ли я понимаю, что если я подключу все стили глобально, то при сборке проекта я получу один css файл со стилями, а если я буду использовать module.css и подключать стили в каждый компонент, то при сборке стили будут использоваться для каждой страницы свои в зависимости от подключения?
P.S. Если кто знает какие-то способы работать с next без module.css подскажите, пожалуйста.
- Вопрос задан более двух лет назад
- 1177 просмотров
Комментировать
Решения вопроса 2
Иван Дербенченко @Mr_FabiozZz
Начинающий фронтендер)
React при сборке собирает все module.css (css) и js (jsx,ts,tsx) в кучу, грубо говоря получается один js и один css).
Глобально стили в React можно подключить в index.js в самом верху по типу:
import 'путь/к/файлу/относительно/index.js/foo.css';В Next (я сам только начал его изучать), можно подключить подобным образом в файле _app.js.
Module.css позволяет избежать дублирования классов, он подставляет в конец уникальный id, таким образом вы во всех файлах module.css можете использовать одинаковый нейминг не опасаясь что они могут совпасть с другими и будет конфликт стилей.
Я сейчас использую scss и module.scss в NextJS
Adding a CSS Reset
This project setup uses PostCSS Normalize for adding a CSS Reset.
To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index.css or App.css .
index.css
@import-normalize; /* bring in normalize.css styles */ /* rest of app styles */ Tip: If you see an «Unknown at rule @import-normalize css(unknownAtRules)» warning in VSCode, change the css.lint.unknownAtRules setting to ignore .
You can control which parts of normalize.css to use via your project’s browserslist.
Results when browserslist is last 3 versions :
/** * Add the correct display in IE 9-. */ audio, video display: inline-block; > /** * Remove the border on images inside links in IE 10-. */ img border-style: none; > Results when browserslist is last 2 versions :
/** * Remove the border on images inside links in IE 10-. */ img border-style: none; > Browser support
Browser support is dictated by what normalize.css supports. As of this writing, it includes:
- Chrome (last 3)
- Edge (last 3)
- Firefox (last 3)
- Firefox ESR
- Opera (last 3)
- Safari (last 3)
- iOS Safari (last 2)
- Internet Explorer 9+