React-Router 无法正确呈现 Styled-Components 样式

Question

问题是，当我导航到 'Post' 扩展屏幕，然后使用我的浏览器返回时，它没有显示正确的 CSS 样式，而是使用来自扩展视图，而不是 'non-expanded' 视图。如果我使用 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>

第二条路线所做的就是找到正确的 post 进行渲染，然后渲染它。

这是我的特定样式组件的代码。

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;

我在这些组件中大量使用道具，因为它会改变渲染方式。

这是您第一次导航到着陆页时正确呈现的所需样式。

这是当您使用浏览器后退按钮从展开的 post 页面返回时发生的非预期样式。

Answer 1

我自己回答了这个问题，慢慢地从我的样式组件中删除了每一行 CSS 来查找问题，结果证明是这行代码

padding: ${props => (props.expanded ? `` : `0 2% 0 10%`)};

React-Router 无法正确呈现 Styled-Components 样式

React-Router not correctly rendering Styled-Components Styles

reactjs

react-router

styled-components