В настоящее время я сталкиваюсь со странной проблемой с GatsbyJS в сочетании со стилизованными компонентами.
В разработке все работает нормально, но когда я создал и обслуживаю сайт локально, все стили, созданные стилизованными компонентами, загружаются примерно через 100–300 мс после завершения загрузки страницы. Кажется, это относится только к стилям, которые используются в файлах макетов и шаблонов.
Я также безуспешно включил gatsby-plugin-styled-components и babel-plugin-styled-components в свой проект.
Я создал небольшой демонстрационный проект на https://github.com/alexanderwe/gatsby-styled-components-test, который показывает ошибку. Если вы хотите, вы можете скачать его и запустить yarn && yarn workspace gatsby-theme-test serve, чтобы увидеть ошибку вживую.
Кто-нибудь сталкивался с подобной проблемой или имеет решение для этого?
Я ценю любую помощь





Похоже, вы внедрили wrapPageElement в gatsby-browser.js, но забыли реализовать и в gatsby-ssr.js. Это означает, что стилизованные компоненты активируются только при загрузке браузера, а не во время рендеринга на стороне сервера.
Для этого просто скопируйте свой gatsby-browser.js в новый gatsby-ssr.js, API должен быть точно таким же.
wrapPageElementwrapPageElement
Вы правы, я совершенно забыл о конфигурации ssr ... уверен, что если сайты отображаются, к ним не применяется макет, поскольку он не соответствует gatsby-ssr.js. Большое спасибо, теперь все работает отлично!