Adding global styles using Styled jsx in AMP version of our site #16755
Unanswered
AngelAngelides
asked this question in
Help
Replies: 1 comment
-
Styled JSX in AMP is now fixed as of Next.js 12.2. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a problem adding styles to our AMP version of our page using the native next.js implementation of styled-jsx on next.js
version "9.5.1"
.I am trying to add the styles on the
_app
level as global styles but I seem to encounter a few issues when it comes to AMP.If I use
<style jsx global>
in the body as it is implied in the documentation and available tutorials, no styles are applied in the AMP version of the pageIf I use
<style jsx>
the styles are applied but the page does not seem to be valid AMP, since I get a messageThe parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'
from the validator.If I use the
<style jsx>
tag in in Head no styles are applied on either AMP or normal pageIf I don't use the jsx flag and just try to use
<style amp-custom={isAmp}>
in Head, styles are applied but the attribute seems to be striped from the tag so the AMP page still does not validate.It seems to me there is no way to produce a valid AMP page on next.js even though the native AMP support is one of the main reasons we switched to it in the first place. Can anyone help me produce a valid AMP page using the native
styled-jsx
?Beta Was this translation helpful? Give feedback.
All reactions