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

Question

我可以根据状态更改样式化的组件样式，但仅在页面加载时，如果我在页面加载后切换状态，状态会成功更改，但样式保持不变。我要更改其样式的样式化组件是“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};

    `

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

标签： javascriptreactjsgatsbystyled-componentscss-in-js

Answer 1

您的样式没有被应用，因为您没有将isVisible道具传递给Search样式组件。

你只需要在你的Search Component：

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