我正在尝试导入组件以将其与GatsbyJs一起使用并使其工作到某一点但除了使用Styled Components之外的其他"effects" .

这是我的代码,说实话,我不知道这是否是React-burge-menu或GatsbyJs的问题 .

首先是组件,我必须将它包装在一个样式的div上才能工作as mention here

sidebar.js

import React from 'react'
import { scaleDown as BurgerMenu } from 'react-burger-menu'
import styled from 'styled-components'
import { Link } from 'gatsby'
import MenuLogo from '../assets/logos/letterlogo.png'

const StyledBurgerMenu = styled.div`
.bm-item {
    text-align:center;  
    display: inline-block;
    text-decoration: none;
    margin-bottom: 5vh;
    color: #d1d1d1;
    transition: color 0.2s;
}
.bm-item:hover {
    color: white;
}
.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 15px;
    right: 2vw;
    top: 2vh;
}
.bm-burger-bars {
    background: #373a47;
}
.bm-cross-button {
    height: 30px;
    width: 15px;
}
.bm-cross {
    background: #bdc3c7;
}
.bm-menu {
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5em 1.5em 0;
    font-size: 2em;
}
.bm-morph-shape {
    fill: #373a47;
}
.bm-item-list {
    color: #b8b7ad;
}

.bm-overlay {
    background: rgba(0, 0, 0, 0.3);
}
`

const Logo = styled.img`
width: 30vw;
display: block;
margin: auto;
`

export default () => (
  <StyledBurgerMenu>
    <BurgerMenu width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)

然后我将它调用到布局,在这里我创建了 outer-containerpage-wrap

layout.js

import React from 'react'
import "normalize.css"
import styled from "styled-components"
import SideBar from "./sidebar"

const MainWrap = styled.div`
    height: 100vh;
    overflow: auto;
`;
const PageWrap = styled.div`
    text-align: center;
    overflow: auto;
    height: 100vh;
`;

export default ({children}) => (
  <MainWrap>
    <SideBar pageWrapId={"PageWrap"} outerContainerId={"MainWrap"}/>
    <PageWrap>
      {children}
    </PageWrap>
  </MainWrap>
)

还尝试直接添加id:

export default ({children}) => (
  <MainWrap id={"outer-container"}>
    <SideBar pageWrapId={"page-wrap"} outerContainerId={"outer-container"}/>
    <PageWrap id={"page-wrap"}>
      {children}
    </PageWrap>
  </MainWrap>
)

它在两种方式都有效,但只有幻灯片动画,我也将这个布局调用到具有以下代码的索引文件:

index.js

import React from 'react'
import Layout from '../components/layout'
import { StaticQuery, graphql } from 'gatsby'
import styled from 'styled-components'
import { FaFacebook, FaInstagram, FaYoutubeSquare, FaTwitterSquare } from 'react-icons/fa'

const Hero = styled.div`
    margin-top: 20vh;
    `
const SocialLinks = styled.div`
    margin-top: 5vh;
    a{
        display: inline-block;
        margin: 1vw;
    }
`;
export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
            description
            fb
            twitter
            youtube
            instagram
          }
        }
      }
    `}
    render={data => (
      <Layout>
        <Hero>
          <h1>{data.site.siteMetadata.title}</h1>
          <h2>{data.site.siteMetadata.description}</h2>
        </Hero>
        <SocialLinks>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.fb}><FaFacebook size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.youtube}><FaYoutubeSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.twitter}><FaTwitterSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.instagram}><FaInstagram size={50} color="black"/></a>
        </SocialLinks>
      </Layout>
        )}
    />
)

下面是使用该代码构建的实例,因为您将看到它可以工作但不会缩小 . Demo

希望你能指出我正确的方向 .

提前致谢