Изменение стиля стилизованных компонентов путем переключения состояния после загрузки страницы

Я могу изменить стили стилизованных компонентов в зависимости от состояния, но только при загрузке страницы. Если я переключаю состояние после загрузки страницы, состояние изменяется успешно, но стили остаются прежними. Стилизованный компонент, стили которого я пытаюсь изменить, - это S.Search, который находится внутри компонента поиска, родителем которого является Navbar. Я передаю Search состояние isVisible как опору, которая переключается обработчиком события onClick в родительском компоненте Navbar.

Родительский компонент:


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

    `

Как я могу изменить стиль после загрузки страницы при переключении состояния? Спасибо за уделенное время!


reactjs javascript styled-components gatsby css-in-js
person Peeper    schedule 24.08.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш стиль не применяется, потому что вы не передаете isVisible prop в Search style-component.

Вам просто нужно сделать это в своем Search Component:

const Search = props => {
      return (
        // Here´s the trick
        <S.Search isVisible={props.isVisible}>
         .....
         .....
         .....
person Luis Paulo Pinto    schedule 25.08.2020
comment
Спасибо, что сработало. Меня это сбило с толку, потому что стили менялись, но не после загрузки страницы, и я не получал сообщения об ошибке, что props.isVisible не определен, поэтому я подумал, что стилизованный компонент просто неявно передавал состояние, а это не необходимо. Почему нужно сдавать такое состояние? - person Peeper; 25.08.2020
comment
Привет @Peeper, это необходимо, потому что в этом случае стилизованные компоненты работают как компонент реакции. Дополнительную информацию можно найти здесь - person Luis Paulo Pinto; 25.08.2020
comment
Еще один способ сделать это: <S.Search {...props}>, в этом случае вы перенесете все свойства компонента в стилизованный компонент. - person Luis Paulo Pinto; 25.08.2020
comment
Есть идеи, почему это вызывает повторную визуализацию всех компонентов при первом переключении состояния? Как я могу этого не допустить? Это потому, что я передаю состояние двум дочерним компонентам? - person Peeper; 25.08.2020
comment
Привет, @Peeper, я не поняла ... у тебя есть два <S.Search>? - person Luis Paulo Pinto; 25.08.2020
comment
isVisible создается в компоненте навигационной панели, который передается компоненту поиска, затем S.Search. - person Peeper; 25.08.2020