如何为未出现在初始渲染中的元素使用样式化组件？

Question

我发现带样式的组件在未包含在初始渲染树中时会在不正确的情况下出现 CSS。

这是一个例子：

我有一个分页的 'wizard' 界面，其中显示了后退和下一步按钮。在第一页上，由于显而易见的原因没有后退按钮。然而，大概是因为后退按钮最初没有得到它的条件 CSS 渲染，样式组件没有为它设置 class。在后续页面上，后退按钮出现时根本没有任何样式：

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

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

我意识到我可以做一些事情，比如给辅助按钮 0 不透明度，而不是将它完全从渲染树中移除，但是在其他情况下，我想根据状态更改渲染树，我可以不知道如何让样式化的组件在这种情况下工作。

这里是 Button class:

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>
        )
    }
}

Answer 1

感谢 Oluwafemi Sule 的帮助，我得以查明这个问题的真相。这是一个非常非常具体的冲突，而不是一个普遍的问题。在我的项目中，我使用了一个 cytoscape 插件 cytoscape-node-html-label (https://github.com/kaluginserg/cytoscape-node-html-label)，它似乎编写了与 styled-components 冲突的样式标签。一旦我禁用它，我的样式化组件就会完美呈现，就像评论中 Oluwafemi 的演示一样。

如何为未出现在初始渲染中的元素使用样式化组件？

How can I use styled components for an element that doesn't appear on initial render?

reactjs

styled-components