Emotion JS - стили в теге тела (проблемы с валидатором) - PullRequest
Новая
       51

Emotion JS - стили в теге тела (проблемы с валидатором)

0 голосов
/ 05 мая 2020

Я заметил, что мои стили эмоций выводятся в формате <body> вместо <head> - это приводит к проблемам с W3 C Validator
Я получаю несколько Element style not allowed as child of element div in this context.

Следующий код: 

const StyledLogo = styled.div;
const StyledAccessibilityText = styled.span;
const StyledImage = styled.img;

<StyledLogo data-testid="Logo">
    <a href="#">
        <StyledAccessibilityText>
            <span>Logo</span>
        </StyledAccessibilityText>
        <StyledImage src="/media/logo.svg" alt="Logo alt" />
    </a>
</StyledLogo>

* Код сокращен

выводится следующим образом 

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <style data-emotion-css="18nny0y">
        .css-18nny0y a {
            display: block;
        }

        .css-18nny0y img {
            height: 1.1875rem;
        }

        @media (min-width:64em) {
            .css-18nny0y img {
                height: 1.25rem;
            }
        }

        @media (min-width:80em) {
            .css-18nny0y img {
                height: 1.5625rem;
            }
        }
        </style>
        <div data-testid="Logo" class="css-18nny0y">
            <a href="#">
                <span class="css-8wdijx">
                    <span>Logo</span>
                </span>
                <style data-emotion-css="1f738qm">.css-1f738qm{display:block;max-width:100%;height:auto;}</style>
                <span class="sc-image-wrapper">
                    <img alt="Logo alt" class="lazyload css-1f738qm" src="/media/logo.svg"/>
                </span>
            </a>
        </div>
        ...
    </body>
</html>

Я использую CRA со следующими версиями пакетов:
"@ эмоция / ядро": "10.0.17"
"@ эмоция / стиль": "10.0.17"
"тема эмоций": "10.0.18"

Когда я проверьте исходный код страницы в Chrome DevTools, стили находятся в ... Я думаю, что после регидратации / рендеринга стили перемещаются в. Но поскольку W3 C Validator проверяет только загрузку первой страницы (и без Javascript?), Он увидит только статистику c HTML, где стили находятся в

...