Стилизованные компоненты - стили в компоненте не будут применяться, пока я не обновлю.Обновление одного компонента нарушает стили другого

Question

У меня есть домашний компонент и компонент проектов.Используя styled-component , я динамически устанавливаю свойство flexbox flex-base в компоненте проектов в зависимости от того, сколько проектов входит в реквизиты.Но стиль не будет применяться, пока я не обновлю компонент.Затем, если я вернусь домой, стили этого компонента будут нарушены, пока я не обновлюсь.

Кажется, что обновление одного компонента нарушает стили другого.

Я использую Laravel с Reactпредустановка внешнего интерфейса.

Код реакции:

<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 должен напрямую применяться, например, к Styled-карте Styled-компонента, а не через класс.