Там! Было ли когда-нибудь в вашей карьере время, когда вы пытались перезаписать стили 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>
. Вот что я сделал, чтобы решить эту проблему:
yarn add create-emotion
, а затем создайте основнойemotion.js
для Emotion внутриsrc
верхнего уровня или аналогичного каталога. Это именно то, что делает Emotionindex.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!
Я хотел бы поблагодарить Кая Хоэнбергера за то, что он уделил мне время, и поблагодарил меня за то, что он написал свою самую первую запись в блоге. 🔥