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

【问题标题】：Changing a styled-component style based on state at the top of app根据应用顶部的状态更改样式组件样式
【发布时间】：2020-12-31 11:08:59
【问题描述】：

所以我有一个简单的导航栏，当点击某个媒体查询时它会变成一个汉堡包，当我点击汉堡包图标时，我希望新的导航栏元素滑过。这是我的设置方式。

布局组件

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>
  )
}

第一次使用 styled-components，但不完全确定我的角度应该是什么。

【问题讨论】：

我不明白你的目标。你能分享更多关于你想要得到什么的细节吗？
最终在较小的设备上，当单击“CloseButton”组件时，它将使用“Sidebar”组件作为视图的外观。我正在使用 useState 来控制它，但我不熟悉 styled-components 会如何发生这种情况

标签： reactjs gatsby styled-components

【解决方案1】：

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

侧边栏样式组件

 opacity: ${props => props.showsidebar ? '1' : '0'};
 transform: ${props => props.showsidebar ? 'translateX(0)' : 'translateX(-100%)'};
`
const Sidebar = ({isOpen, toggleSidebar,}) => {
  return (
    <SidebarAside showsidebar={isOpen}>
      <CloseButton onClick={toggleSidebar}>
        <FaTimes />
      </CloseButton>
    </SideBarAside>

【讨论】：