根据应用顶部的状态更改样式组件样式

Question

因此，我有一个简单的导航栏，当单击某个媒体查询时，它会变成一个汉堡包，而当我单击hamburger-icon时，我希望新的导航栏元素滑过。这是我的设置方法。

布局组件

const Layout = ({ children }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggleSidebar = () => {
    setIsOpen(!isOpen)
  }

  return (
    <>
      <Navbar toggleSidebar={toggleSidebar} />
      <Sidebar isOpen={isOpen} toggleSidebar={toggleSidebar}/>
      {children}
      <Footer />
    </>
  )
}

侧边栏组件

const SidebarAside = styled.aside`
  background: ${props => props.theme.grey10};
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: ${props => props.theme.transition};
  transform: translateX(-100%);

  ${props =>
    props.showsidebar && css`
      opacity: 1;
      tranform: translateX(0);
    `
  }
`
const CloseButton = styled.button`
  position: absolute;
  right: 4.75%;
  top: 2.75%;
  font-size: 2.5rem;
  background: transparent;
  border-color: transparent;
  color: ${props => props.theme.redDark};
  cursor: pointer;
`
const Sidebar = ({isOpen, toggleSidebar,}) => {
  return (
    <SidebarAside showsidebar={isOpen}>
      <CloseButton onClick={toggleSidebar}>
        <FaTimes />
      </CloseButton>
    </SidebarAside>
  )
}

第一次使用样式化组件，并且不确定我对此应该是什么角度。

Answer 1

我最终想通了，只是将样式化组件中的语法更改为...

侧边栏样式的组件

Delete