CSS modules в Create React App, простым языком

Расскажу о том, что такое CSS modules и как его использовать в приложениях Create React App. Также расскажу о том, как заставить работать CSS модули в приложениях созданных с помощью create-react-app.
Мой Telegram канал
t.me/way_of_de...
Вы можете поддержать мой канал:
www.donational...
donate.qiwi.co...

[@hykoza]

Всё чётко и понятно! Спасибо за контент!

[@evgenya_pan]

Искала как задать класс из переменной, при этом чтоб было несколько классов. Допустим, нам надо чтобы у дива были классы "cell" + класс по названию свойства объекта "cell.color".Нигде не говорится об этом, вот что нашла: подключаем библиотеку classnames. Пишем className = {classNames(styles.cell, styles[`${cell.color}`])}

[@rw_machine1974]

Отличное объяснение, молодец Дмитрий! :)

[@dorami6845]

Спасибо за данное видео!

[@ginhop1057]

а как сделать autocomplete, чтобы при вводе styles. (подсвечивались классы из модуля)

[@водокачка]

Здравствуйте! Подскажите, как настроить поддержку css для старых браузеров для css-модулей?

[@benchik100]

спс

[@mishakrasnonos6333]

с коробки он не работатет, установил реакт с тс и ругается на импорт модуля

[@oleg.j8863]

Привет, как решил проблему? у меня тоже ругается при создание модулей, только если не создам "css" файл и с ним же с таким же названием "module.css" тогда он не ругается. Это странно ведь везде я где бы не смотрел у всех норм всё работаем. Мой редактор Visual Study Code

[@mishakrasnonos6333]

@@oleg.j8863 помоиму ставили npm css-modelues или типо того точное название не помню, так же добавил файл type.d.ts
Есть пример как это сделать на stack overflow

[@oleg.j8863]

@@mishakrasnonos6333 спасибо сейчас зайду на overflow

[@alenache1]

👍👍👍

[@mephisto2226]

а как БЭМ использовать? если синтаксис класса возможен только в camelCase

[@dmitrii_gerasimov]

А для чего использовать в CSS modules БЭМ? И почему Вы решили, что возможно использовать только camelCase? Там же нет такого требования.

[@АлександрПараконный]

Добрый день. Подскажите плиз, как вы обходите ситуацию когда в css модуле дочернего компонента нужно обратиться к элементу из родительского ? Например .parent:hover .child{filter: blur(3px)}. Каждый компонент имеет свой module.css. ??? Или в этом случае лучше использовать 1 module.css на оба компонента ?

[@dmitrii_gerasimov]

Нужно использовать в обоих компонентах.

[@voidcode2534]

@@dmitrii_gerasimov Использовать 1 модуль в обоих компонентах или в каждом свой. Ответ не понял

[@vitya.obolonsky]

@@voidcode2534один на 2 міста

[@vitya.obolonsky]

Так вони перформанс понижають

[@sailoks8411]

А можно использовать такой способ с scss?

[@dmitrii_gerasimov]

Нет, это же совершенно другое. SCSS - это SCSS. А CSS modules - это отдельная технология. Это не CSS, а инструмент, который просто использует синтаксис CSS.

[@masasikisimoto26]

Да можно

[@hotmitrofan]

конечно можно, все тоже самое как и с CSS

[@weiter-infos]

Как второй класс добавить ? если уже рассказывать так рассказать доконца может

[@dmitrii_gerasimov]

Можно использовать библиотеку classnames. В своих проектах я так и делаю.
Например вот так: className={classnames(styles.firstStyle, styles.secondStyle)}

[@paranoxes]

На сколько знаю самый простой вариант без доп. библиотек через шаблонные строки. className={` ${styles.firstStyle} ${styles.secondStyle} `}

[@oleg.j8863]

@@paranoxes Привет, у меня ругается редактор а точнее не передаёт данные после чего весь проект тухнет, при создание модулей, только если не создам "css" файл и с ним же с таким же названием "module.css" тогда он не ругается. Это странно ведь везде я где бы не смотрел у всех норм всё работаем. Мой редактор Visual Study Code

[@theoty-js]

Create app react next js jsx cms less scss canvas next action reducer

[@rasul3d]

А вы видели по чем колбаса ? 1450₽ за 150 Гр. Свиная. ( ору). Спасибо за ролик. Было полезно.

[@dmitrii_gerasimov]

Это в России такая цена?

[@user-qe3hr7ve3c]

сори, не по теме)
5 декабря, а на улице +18?) гуд погодка)

[@dmitrii_gerasimov]

Да, мне тоже нравится😁