如何将样式化组件用于未出现在初始渲染中的元素？答案

【问题标题】：How can I use styled components for an element that doesn't appear on initial render?如何将样式化组件用于未出现在初始渲染中的元素？
【发布时间】：2018-07-31 04:38:58
【问题描述】：

我发现样式化组件在没有包含在初始渲染树中时，会在没有正确 CSS 的情况下显示。

这是一个例子：

我有一个分页的“向导”界面，显示返回和下一步按钮。在第一页上，出于显而易见的原因，没有后退按钮。然而，大概是因为后退按钮最初没有得到它的条件 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>
        )
    }
}

【问题讨论】：

你能分享SecondaryButton组件的实现吗？
我现在已经包含了确切的代码，我在这个问题的第一个版本中可能过于简单化了。我实际上仍在简化一点，因为我确实需要我的 Button 组件上的状态，只是为了紧凑而在这里删除了它。
即使在同一个文件中，最初未渲染的样式组件也会发生同样的问题。
嗯，我未能成功重现此问题stackblitz.com/edit/react-kjkbqe?file=index.js。也许我缺少一些东西。正如您在我的示例中看到的那样，我试图让按钮最初不呈现。
你是对的！它在那里和我的本地机器上工作。我的项目设置中一定有一些奇怪的东西。过几天会进一步调查。谢谢你的线索。

标签： reactjs styled-components

【解决方案1】：

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

【讨论】：