通过在页面加载后切换状态来更改样式化组件样式

Question

我能够根据状态更改带样式的组件样式，但仅限于页面加载时，如果我在页面加载后切换状态，状态会成功更改但样式保持不变。我试图更改其样式的样式化组件是“S.Search”，它位于父级为“Navbar”的“搜索”组件内。我将“搜索”传递为“isVisible”状态作为道具，该道具由父组件“导航栏”中的 onClick 事件处理程序切换。

父组件：


    import React, { useContext, useState } from "react"
    import Search from "../components/Search"
    import * as S from "../styled/Navbar"

    const Navbar = () => {

      const [isVisible, setVisibility] = useState(false)
      return (
        <S.Navbar>
          /* S.SearchButton toggles the isVisible state onclick */
              
              <S.SearchButton onClick={() => setVisibility(!isVisible)}>
                <S.SearchButtonText>Search</S.SearchButtonText>
              </S.SearchButton>
            
            /* Passing isVisible state into the Search component as props */
            
            <Search isVisible={isVisible} setVisibility={setVisibility} />
        </S.Navbar>
      )
    }

    export default Navbar

搜索组件：


    import React, { useState } from "react"
    import Icon from "../components/Icon"
    import * as S from "../styled/Search"

    const Search = props => {
      return (
        <S.Search>
          <S.InputWrapper>
            <S.SearchButtonIcon>
              <Icon icon={"search"} />
            </S.SearchButtonIcon>
            <S.Input
              type="text"
              placeholder="Search for a character"
              autocomplete="off"
            />
            <S.ChampList></S.ChampList>
          </S.InputWrapper>
        </S.Search>
      )
    }

    export default Search

我确定我的状态切换正确，但我不知道为什么在页面加载后切换状态时样式没有更新。这是通过传递给搜索组件的道具访问 isVisible 状态的样式化组件：


    import styled from "styled-components"

    export const Search = styled.div`
      height: ${p => (!p.isVisible ? `0` : `2.5rem`)};
      visibility: ${p => (!p.isVisible ? `hidden` : `visible`)};
      opacity: ${p => (!p.isVisible ? `0` : `100`)};
      display: flex;
      justify-content: center;
      transition: ${p => p.theme.easings.easeOut};

    `

如何在切换状态时更改页面加载后的样式？感谢您的宝贵时间！

Answer 1

您的样式未被应用，因为您没有将 isVisible pro 传递给 Search style-component。

您只需在 Search Component:

中执行此操作

const Search = props => {
      return (
        // Here´s the trick
        <S.Search isVisible={props.isVisible}>
         .....
         .....
         .....

通过在页面加载后切换状态来更改样式化组件样式

Changing a styled components style by toggling state after page load

javascript

reactjs

gatsby

styled-components

css-in-js