我正在尝试导入组件以将其与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-container 和 page-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
希望你能指出我正确的方向 .
提前致谢