React-Router неправильно отображает стили Styled-Components - PullRequest
1 голос
/ 31 мая 2019

Проблема в том, что когда я перехожу к «Посту», развернутому экрану, а затем использую свой браузер для возврата, он не отображает правильные стили CSS, он использует стили из расширенного представления, а не «нераскрытое представление.Если я переключаю стиль на Компоненте с помощью Inspect Element, это немедленно решает проблему.Я знаю, что я мог бы обойти это, добавив кнопку «Назад» на странице, и я, вероятно, сделаю, но как насчет людей, которые используют кнопку «Назад» браузера?

Я пытаюсь использовать один и тот же StyledComponent для разных страниц,Вот код для моего роутера

<Router>
      <Route
        exact
        path="/"
        render={() => posts.map((post, key) => <Post data={post} key={key} />)}
      />
      <Route
        exact
        path={`/posts/:post`}
        render={currentPath => renderCurrentPost(currentPath)}
      />
    </Router>

Все, что делает второй маршрут - это найти правильный пост для рендеринга, а затем отрендерить его.

Вот мой код для определенного стилизованного компонента.

import Styled from 'styled-components';
const Title = Styled.h1`
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    color: ${props => (props.expanded ? `white` : `#111111`)}
    font-size: ${props => (props.expanded ? `5vh` : `1.2em`)}
    margin: 0 0 0 0;
    align-self: flex-end;
    /* display: inline; */
    position: ${props => (props.expanded ? `relative` : ``)};
    top: ${props => (props.expanded ? `70%` : ``)};    
    left: ${props => (props.expanded ? `5%` : ``)};
     `;

export default Title;

Я использую реквизит в этих компонентах, так как это изменит способ рендеринга.

Вот требуемый стиль, который корректно отображается при первом переходе на целевую страницу. Desired Style

Вот нежелательный стиль, который происходит при навигациивернуться с расширенной страницы сообщения с помощью кнопки «Назад» браузера. Non-Desire Style

1 Ответ

0 голосов
/ 31 мая 2019

Я сам ответил на это, медленно удаляя каждую строку CSS из моего стилизованного компонента, чтобы найти проблему, которая оказалась этой строкой кода

padding: ${props => (props.expanded ? `` : `0 2% 0 10%`)};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...