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

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

我能够基于状态更改样式化的组件样式，但是仅在页面加载时才能更改，如果在页面加载后切换状态，状态会成功更改，但样式保持不变。我要更改其样式的样式化组件是“ S.Search”，该组件位于其父项是“ Navbar”的“ Search”组件中。我正在传递“搜索”一个“ 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};

    `

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

解决方法

由于您没有将isVisible属性传递给Search样式组件，因此未应用您的样式。

您只需要在Search Component中进行此操作：

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