astro react component not getting styled with styled component

Question

I'm importing this navbar component into an astro file, the component shows up on the page but the but the styling from styled-component is not working and it is throwing an error in my code editor that says:

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

score 0 · Accepted Answer · answered Sep 14 '22 at 15:09

0

Warning: Invalid hook call.... To resolve this error modify the first line of your code to;
export default function Navigation() { and remove the default function export referenced lower in the code.

I haven't yet figured out why but astro.js seems to take issue with naming convention for default exports on functional components.
I can't resolve the styling issue unfortunately.

answered Sep 14 '22 at 15:09

roborbob

16

i did this and it worked and got rid of the error. I had to switch to regular CSS for the styling but now I don't know how to handle state as useState hook in react isn't working yet and I'm not sure if there is another way to manage state using astro, if there is is I'd love to know. – Thebuilder Sep 17 '22 at 14:07
I solved the useState hook issue by adding client: load to the `Navigation` component so it looked like this `` in the astro file it was called. – Thebuilder Sep 17 '22 at 17:24

astro react component not getting styled with styled component

1 Answers1