NextJS с быстрым обновлением стилизованных компонентов не работает

Question

У меня есть приложение NextJS, которое используется со стилизованными компонентами.

У меня есть эти 3 файла: Стоит отметить, что некоторые пометки удалены для ясности, поэтому вставляются только соответствующие коды.

Header.js

      import {
   HeaderContainer, 
   SearchInput,
   SearchWrapper
} from './HeaderStyles';
import { Input } from '../GlobalComponents/GlobalComponents';


const Header = () => {
   return (
      <HeaderContainer>
         <SearchWrapper>
            <SearchInput type='text' placeholder='Search movie' />
         </SearchWrapper>
      </HeaderContainer>
   );
}
 
export default Header;

      import styled from 'styled-components';
import { Input } from '../GlobalComponents/GlobalComponents';

export const HeaderContainer = styled.header`
   background-color: ${props => props.theme.colors.primary};
   display: flex;
   align-items: center;
   box-sizing: border-box;
`;

export const SearchWrapper = styled.div`
   flex-grow: 3;
   background-color: red;
`;

export const SearchInput = styled(Input)`
   background-color: yellowgreen;
`;

      import styled from "styled-components";

export const Input = styled.input`
   padding: 1rem;
`;

Прилагается структура моего проекта

Обратите внимание, что внутри SearchInputраспространяется из всякий раз, когда я меняю свойства css в HeaderStyles.js, быстрое обновление работает нормально. Однако в случае GlobalComponents.js, мне пришлось вручную перезагрузить страницу, чтобы просмотреть изменения.

Если бы я поместил свой общий Inputстиль в HeaderStyles, он отлично работает, но я не хотел его структурировать. Так что я предполагаю, что это связано с тем, что импортированные модули не находятся в дереве React или что-то в этом роде.

Я искал решения в Интернете, но мне не повезло. Хотелось бы узнать причины и пути решения. Спасибо в рекламе.

Answer 1

Я думаю, что ваша проблема со стилизованным компонентом в SSR.

Вы можете попробовать изменить свои страницы/_document.js и конфигурацию Babel.

добавьте эти коды в .babelrc

      {
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

_document.js

https://github.com/vercel/next.js/blob/main/examples/with-styled-components/pages/_document.js

Answer 2

с Next Complier в новой версии next вам нужно только обновить файл next.config и файл _document, и все будет готово. Babel вызовет конфликт с компилятором NextJS.

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

Answer 3

У меня была такая же проблема.

Сначала вам нужно установить этот пакет:

      npm install --save-dev babel-plugin-styled-components

Затем вы создаете файл в корне каталога вашего проекта с именем «babel.config.js». В этот файл вы включаете следующее:

      module.exports = {
  presets: ["next/babel"],
  plugins: [["styled-components", { ssr: true }]]
};

Answer 4

Проблема связана с Next JS, и для ее решения вам нужно всего лишь добавить этот код в _document.tsx или _document.js, и она будет решена.

      import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Answer 5

Убедитесь, что у вас естьpages/_document.jsс кодами, указанными здесь .