Блог

В настоящее время я пытаюсь объединить styled-components и react-bootstrap в своем приложении React. Я хочу использовать глобальную таблицу стилей, которая поставляется в комплекте с react-bootstrap, с которой я сейчас работаю import "bootstrap/dist/css/bootstrap.min.css"; .

В документах есть несколько примеров, и я думаю, что понимаю основную идею о том, как вы создаете глобальный стиль. Однако, похоже, что styled-components хочет, чтобы я импортировал глобальную таблицу стилей, вызывая createGlobalStyle() CSS файла, но каждый пример, который я видел, вызывает функцию в строке шаблона. Действительно ли мой единственный вариант здесь — прочитать весь файл CSS в виде строки и передать его createGlobalStyle ?

Еще некоторое копание дало ответ. Предупреждение, сгенерированное createGlobalStyle внутри консоли разработчика, гласит следующее:

GlobalStyle.js:28 Пожалуйста, не используйте синтаксис CSS @import в createGlobalStyle в настоящее время, поскольку API CSSOM, которые мы используем в производстве, плохо справляются с этим. Вместо этого мы рекомендуем использовать библиотеку, такую как react-helmet, для добавления типичного мета-тега в таблицу стилей или просто встраивания его вручную в ваш index.html раздел для более простого приложения.

Похоже, что правильный способ импортировать файл css — это просто добавить его в шлем.