Отладка стилизованных компонентов с помощью приложения Create React

Question

Я установил Styled Components в свое приложение Create React, и все работает нормально, но по умолчанию выглядит так, как будто имя класса, которое он добавляет к элементу, не основано на имени стилизованного компонента (т. Е. MyButton должен создать элемент с классом MyButton-134as23f).

В документации Styled Components сказано установить babel-plugin-styled-components, а затем сконфигурировать файл .babelrc, однако из того, что я понимаюу нас нет доступа к этому файлу, пока мы не извлечем его из приложения.

Итак, как я могу отлаживать стилизованные компоненты при разработке приложения в Create React App?

Answer 1

Мне удалось найти ответ на этот вопрос:

Поскольку приложение Create React является приложением с нулевой конфигурацией, единственный способ добавить что-либо в файл .babelrc - извлечь из React.

Очевидно, я хотел сохранить все свои инструменты и наткнулся на babel-plugin-macro .По сути, это способ для пользователей запускать библиотеки во время компиляции без предварительной настройки файла Babel.

Итак, после установки его на мои devDependencies я изменил путь импорта на import styled from 'styled-components/macro, и все функции плагина Babel, для которых вам обычно нужно было бы извлечь, стали стандартными со Styled Components.

Дайте мне знать, если у вас есть какие-либо вопросы или проблемы с моим ответом.

Надеюсь, это поможет!