0

我有一个与样式组件一起使用的 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;

HeaderStyles.js

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;
`;

GlobalComponents.js

import styled from "styled-components";

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

附件是我的 项目结构


请注意，在里面HeaderStyles.js，是从中SearchInput扩展的， 每当我更改 中的 css 属性时，快速刷新就可以正常工作。但是，在 的情况下，我必须手动重新加载页面才能查看更改。InputGlobalComponents.jsHeaderStyles.jsGlobalComponents.js

如果我将我的通用Input样式放入HeaderStyles中，它可以正常工作，但这不是我想要的结构。所以我猜这与导入的模块不在 React 树或类似的东西中有些相关。

我一直在网上寻找解决方案，但没有运气。想知道这种情况的原因和解决方法。谢谢你的建议。

4

1 回答 1

0

我认为您对 SSR 样式组件的问题。

您可以尝试更改 pages/_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

于 2022-02-24T14:12:54.140 回答