Там! Было ли когда-нибудь в вашей карьере время, когда вы пытались перезаписать стили Bootstrap / Foundation / что-то еще по мере необходимости? Здесь, в Brightcove 📹, мы в настоящее время используем Emotion 👩‍🎤 CSS-in-JS, CSS Grid, React и т. Д. Для восстановления одного из наших модулей. Неожиданно и странно, что только в производственной среде стили Emotion не перезаписывали стили нашей библиотеки компонентов (построенные с использованием модулей CSS и flexbox) по мере необходимости. Оказывается, тег Emotion <style data-emotion> находился над тегами модуля CSS <style>, в результате чего стили модуля CSS стали «!important» 👿:

Чтобы убедиться, что стили Emotion перезаписывают стили модуля CSS в производственной среде, тег Emotion <style data-emotion> должен располагаться после тегов модуля CSS <style>. Вот что я сделал, чтобы решить эту проблему:

  1. yarn add create-emotion, а затем создайте основной emotion.js для Emotion внутри src верхнего уровня или аналогичного каталога. Это именно то, что делает Emotion index.js (https://github.com/emotion-js/emotion/blob/master/packages/emotion/src/index.js). За исключением того, что здесь, как показано на L5–7 и L21 ниже, мы создаем новый элемент контейнера <div> для вставки перед записью <div> нашего приложения React и говорим Emotion вставить туда все свои стили (https://github.com/ эмоция-js / эмоция / дерево / мастер / пакеты / создать-эмоцию # контейнер-htmlelement ).

2. Теперь, когда у нас есть собственный экземпляр Emotion в нашем приложении, нам также нужно react-emotion, чтобы использовать вместо этого Emotion. Для этого yarn add create-emotion-styled, а затем создайте главный react-emotion.js для react-emotion также внутри нашего src каталога верхнего уровня. Это именно то, что делает react-emotion index.js (https://github.com/emotion-js/emotion/blob/master/packages/react-emotion/src/index.js). За исключением того, что здесь, как показано в L4 и L8 ниже, мы говорим react-emotion импортировать Emotion из нашего собственного экземпляра Emotion (emotion.js выше):

3. Теперь, когда у нас есть собственные экземпляры Emotion и react-emotion, нам нужно указать всем нашим компонентам и т. Д. Импортировать из этих экземпляров вместо 'emotion' и 'react-emotion':

4. После развертывания в производственной среде с этими изменениями 🙏 мы должны увидеть тег Emotion <style data-emotion> внутри нашего недавно созданного тега <div id="emotion”> и под всеми тегами модуля CSS <style>:

Я надеюсь, что это поможет Emotion и другим людям, занимающимся CSS в JS! Если есть вопросы, я @EubeneSa!

Я хотел бы поблагодарить Кая Хоэнбергера за то, что он уделил мне время, и поблагодарил меня за то, что он написал свою самую первую запись в блоге. 🔥