Отладка стилизованных компонентов с помощью Create React App
Я установил стилизованные компоненты в свое приложение Create React, и все работает нормально, но по умолчанию выглядит так, как будто имя класса, которое он добавляет к элементу, не основано на имени стилизованного компонента (т. е. MyButton должен создать элемент с классом MyButton-134as23f).
В документации Styled Components сказано установить babel-plugin-styled-components, а затем настроить файл .babelrc, однако, насколько я понимаю, у нас нет доступа к этому файлу, пока мы не выйдем из приложения.
Итак, как я могу отлаживать стилизованные компоненты во время разработки приложения в Create React App?
Ответы 1
Я смог найти ответ на это:
Поскольку приложение Create React — это приложение с нулевой конфигурацией, единственный способ добавить что-либо в файл .babelrc — извлечь его из React.
Очевидно, я хотел сохранить все свои инструменты и наткнулся на Babel-плагин-макрос. По сути, это способ для пользователей запускать библиотеки во время компиляции без предварительной настройки файла Babel.
Итак, после установки его в мои devDependencies, я изменил путь импорта на import styled from 'styled-components/macro, и все функции плагина Babel, которые вам обычно нужно извлекать, стали стандартными для Styled Components.
Дайте мне знать, если у вас есть какие-либо вопросы или проблемы с моим ответом.
Надеюсь это поможет!