Astro中React导航组件styled-components样式失效及Hook报错问题

将React导航组件导入Astro文件后，组件可正常显示，但styled-components样式未生效，同时代码编辑器抛出如下错误：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

相关代码：

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components'
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/Ai'
import { Link } from 'react-scroll';

function Navigation() {
  
    const [navb, setNavb] = useState(true);
    const handleClick = () => setNavb(!navb) ;
    const [click, setClick] = useState(true)
    const handleMenu= () => setNavb(!navb)
    const iconStyle = {width: "30px" , height:"30px", color: "#ffffff", }
    const linkStyleDesktop = { color: "#000000", padding: "0 10px ", cursor: "pointer"}
    const linkStyleMobile = { color: "#ffffff", padding: "30px 0", fontSize: "1.5rem", cursor: "pointer"}


     return (
      <Header className = "style">
        <Container>
              <a href="#">LOGO</a>
              <Nav className="desktop-nav">
                    <div className="desktop-navItems" >
                          <Link  style = {linkStyleDesktop}   to="/" smooth={true}  duration={500}>
                              Home
                         </Link>
                        <Link style = {linkStyleDesktop}  to="about" smooth={true}  duration={500}>
                              About
                        </Link>
                        <Link  style = {linkStyleDesktop} to="portfolio" smooth={true}  duration={500}>
                              Portfolio
                        </Link>
                        <Link  style = {linkStyleDesktop} to="footer" smooth={true}  duration={500}>
                             Contact
                        </Link>
                    </div>
              </Nav> 
              
              <button className = "btn" onClick = {handleClick}> {!navb ? <AiOutlineClose style={iconStyle}/>:  <AiOutlineMenu  style={iconStyle} />  } 
              </button>
              
        </Container>

          <Nav className="mobile-nav">
            
                <div className={!navb || !click ? 'display-mobile-nav' : 'display-none'} >
                          <Link onClick={handleMenu}    style = {linkStyleMobile} to="app" smooth={true}  duration={500}>
                           Home
                        </Link>
                        <Link onClick={handleMenu}  style = {linkStyleMobile}to="about" smooth={true}  duration={500}>
                              About
                        </Link>
                        <Link onClick={handleMenu}   style = {linkStyleMobile} to="portfolio" smooth={true}  duration={500}>
                              Portfolio
                        </Link>
                        <Link onClick={handleMenu}   style = {linkStyleMobile} to="footer" smooth={true}  duration={500}>
                             Contact
                        </Link>
                </div>
                
        </Nav>
  </Header>
  )
}

export default Navigation;

const Header = styled.header`
  background-color: #262b33;
  padding: 1rem 0;
  width: 100vw;
  position:fixed;
  z-index: 999;

.display-mobile-nav {
  display: block;
}

.display-none{
  display: none;
}

  .desktop-nav {
    display: none;
  }

 
.mobile-nav {

  .display-mobile-nav {
    display:flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
    transition: opacity 5s ease-in;

  }
}

`;

//container for desktop nav
const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 8rem;
  font-family:Arial, Helvetica, sans-serif;

@media (max-width: 1200px){

  padding: 1rem 1rem;
}


a  {

  color: #ffffff;

}

button {
  background-color: transparent;
  border: none;
 }



@media (min-width: 800px){
  .desktop-nav {
    display: block;
  }

  .btn { 
    
    display: none
  
  }
  
  .mobile-nav {
    display: none;

      .display-mobile-nav {
        display: none;
      }

  }

}
  `

const Nav = styled.div`
  .desktop-navItems {
    display: flex;

    li {
      padding: 0 10px;
    }
  }

  @media (min-width: 800px){
  
  .mobile-nav {
    display: block;
  }
`;

一、修复Hook调用错误 #

1. 排查React版本冲突
   Astro项目可能存在多份React副本，导致Hook执行异常：

   • 删除node_modules和package-lock.json/yarn.lock
   • 重新执行npm install/yarn install
   • 确保package.json中react、react-dom版本一致，且与styled-components兼容

2. 确保组件客户端渲染
   Astro默认服务端渲染组件，Hooks无法在服务端执行，导入组件时必须添加客户端指令：

   ---
   import Navigation from '../components/Navigation';
   ---
   <Navigation client:load />
   

   可根据需求选择client:visible、client:idle等其他指令。

二、修复styled-components样式不生效问题 #

1. 配置Astro集成
   Astro默认不支持styled-components，需安装并配置对应集成：

   • 安装依赖：npm install @astropub/styled-components styled-components react react-dom
   • 修改astro.config.mjs：

     import { defineConfig } from 'astro/config';
     import react from '@astrojs/react';
     import styledComponents from '@astropub/styled-components';
     
     export default defineConfig({
       integrations: [react(), styledComponents()],
     });
     

2. 修复样式语法错误
   代码中Nav组件的styled定义缺少闭合的}，导致样式解析失败，修正后：

   const Nav = styled.div`
     .desktop-navItems {
       display: flex;
   
       li {
         padding: 0 10px;
       }
     }
   
     @media (min-width: 800px){
       .mobile-nav {
         display: block;
       }
     }
   `;
   

3. 确认客户端渲染配置
   同Hook问题，必须给React组件加上客户端指令，styled-components的样式需要在客户端注入才能生效。

内容的提问来源于stack exchange，提问作者Thebuilder