Question

我发现样式化组件在不包含在初始渲染树中时，没有正确的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>
        )
    }
}

Answer 1

感谢Oluwafemi Sule的帮助，我得以深入了解此问题。这是一个非常非常具体的冲突，而不是一个普遍的问题。在我的项目中，我使用的是一个用于插入细胞景观的插件cytoscape-node-html-label（https://github.com/kaluginserg/cytoscape-node-html-label），该插件似乎编写与styled-components冲突的样式标签。一旦禁用它，我的样式化组件便会像Oluwafemi的演示中的注释中那样完美呈现。

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

1 个答案: