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

Posted 2023-03-15

【中文标题】根据应用顶部的状态更改样式组件样式

【英文标题】：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 会如何发生这种情况

【参考方案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>