如何对初始渲染时未显示的元素使用样式化组件?

我发现样式化的组件,当不包括在初始呈现树中时,没有正确的CSS。

下面是一个例子:

我有一个分页的“向导”界面,显示后退和下一步按钮。在第一页,由于明显的原因没有后退按钮。但是,可能是因为back按钮最初没有呈现其条件css,所以样式化组件没有为其设置类。在随后的页面中,“后退”按钮完全不显示任何样式:

<ButtonRow>
  {canGoBack && (
  <Button text='Back' />
  )}
  {canAdvance && (
  <Button primary leftSpaced text='Next' />
  )}
</ButtonRow>

canGoBack = false 第一次渲染时, true 用户前进后。但是在前进之后,“后退”按钮完全没有CSS,只是一个开箱即用的HTML按钮。

我意识到我可以做一些事情,比如给辅助按钮0不透明度,而不是把它完全放在渲染树中,但是还有其他的上下文,我想根据状态更改渲染树,我不知道如何让样式化的组件在这样的场景中工作。

这里是 Button 班级:

import React, { Component } from 'react';
import styled, { css } from 'styled-components';

const StyledButton = styled.button`
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 9px 44px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    ${props => props.primary ? css`
        color: #FFF;
        box-shadow: 0 1px 2px 0 #A0A0A0;
        background-color: #3E8FF6;
    ` : css`
        color: #555;
        box-shadow: 0 1px 2px 0 #F0F0F0;
        background-color: #FFF;
    `}
    ${props => props.leftSpaced && css`
        margin-left: 6px;
    `}
    &:focus {
        outline: 0;
    }
`;

export default class Button extends Component {
    render() {
        return (
            <StyledButton
                onClick={this.didClick}
                primary={this.props.primary}
                type={this.props.type || 'button'}
                leftSpaced={this.props.leftSpaced}>{this.props.text}</StyledButton>
        )
    }
}