React-Router无法正确呈现样式化组件样式

Question

问题是，当我导航到“发布”后的展开屏幕，然后使用浏览器返回时，它没有显示正确的CSS样式，而是使用了展开视图中的样式，而不是“非展开”视图。如果我使用Inspect Element在Component上切换样式，它将立即解决该问题。我知道我可以通过在页面上添加后退按钮来规避此问题，我可能会这样做，但是使用浏览器后退按钮的人呢？

我试图将相同的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;

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

这是您首次导航到登录页面时可以正确呈现的所需样式。

以下是使用浏览器后退按钮从展开的帖子页面向后浏览时发生的不期望的样式。

Answer 1

我自己回答了这一问题，方法是从样式化的组件中慢慢删除每行CSS行以查找问题，结果就是这行代码

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