样式化的组件 - 组件中的样式在我刷新之前不会应用。刷新一个组件会破坏另一个组件的样式

Question

我有一个家庭组件和一个项目组件。使用styled-components，我根据输入道具的项目数量动态设置项目组件中的flexbox属性flex-basis。但是在我刷新组件之前，该样式不会应用。然后，如果我导航回首页，则该组件上的样式会被破坏，直到我刷新为止。

似乎刷新一个组件会破坏另一个组件的样式。

我正在使用带有 React 前端预设的 Laravel。

反应代码：

<ProjectsWrapper projects={projects}>

样式化组件代码：

${breakpoints.tablet`
   .card {
      flex-basis: ${props => props.projects < 3 ? '50%' : '33%'};
   }
`};

更新为显示路由：

return (
            <SiteWrapper>
                <div className="container-fluid">
                    <Router>
                        <Switch>
                            <Route
                                render={({ location }) => (

                                (more code such as navigation...)

                                <div style={{ position: 'relative' }}>
                                            {routes.map(({ path, Component }) => (
                                                <Route key={path} exact path={path}>
                                                    {({ match }) => <Component data={dataObject} imagepath={imagePath} in={match != null} />}
                                                </Route>
                                            ))}
                                        </div>
                                    </div>
                                )}
                              />
                        </Switch>
                    </Router>
                </div>
            </SiteWrapper>
)

它所映射的“路线”是一个包含以下内容的对象：

const routes = [
    { path: '/', name: 'Home', Component: HomePage },
    { path: '/about', name: 'About', Component: AboutPage },
    { path: '/projects', name: 'Projects', Component: ProjectsPage },
    { path: '/blog' , name: 'Blog', Component: BlogPage }
]

Answer 1

所以我不太明白你是如何在这里使用样式化组件的，我不知道 breakpoints.tablet 是什么，但我假设一个样式化组件。

你可以这样修改：

const StyledCardContainer = styled(breakpoints.tablet)`
   .card {
      flex-basis: ${props => props.projects < 3 ? '50%' : '33%'};
   }
`;

在你的 ProjectsWrapper 的渲染中我假设：

<StyledCardContainer projects=${this.props.projects}>
   <div class="card">...</div>
</StyledCardContainer

尽管 CSS 应该直接应用于样式组件 StyledCard，而不是通过类。