Preact项目中div元素无法渲染的问题求助

大家好，我目前在开发一个Preact项目，下面是我某个页面的核心渲染代码：

return (
    <Fragment>
        <div style={gridStyle}>
            <p>Test</p>
        </div>
        <Keyboard offset={this.state.octaveAdj} highlightTable={highlightTable} highlightColor={colorIndex} />
        <KeySelector selectedKey={selectedKey} link={true} />
        <Playbox offset={this.state.octaveAdj} highlightTable={highlightTable}
          raiseOctave={this.raiseOctave} lowerOctave={this.lowerOctave}
          risingDisabled={this.state.octaveAdj === MAXoctaveAdj} lowerDisabled={this.state.octaveAdj === MINoctaveAdj}
          color={color} />
        <ChordDetail chord={chord} inversion={inversion} color={color} />
        <ChordSelector selectedKey={selectedKey} />
    </Fragment>
);

现在遇到了一个棘手的问题：用Parcel启动的开发服务器里，其他所有组件（比如Keyboard、KeySelector这些）都能正常渲染显示，唯独那个包含<p>Test</p>的div完全看不到踪影。我已经确认gridStyle是一个合法的JavaScript样式对象，既不是undefined也没有格式错误，但就是没法让这个div显示出来。

有没有朋友遇到过类似的情况？或者能帮我分析下可能的原因？比如是不是样式设置导致元素被隐藏了？还是Preact的Fragment渲染有什么特殊注意事项我没注意到？

备注：内容来源于stack exchange，提问作者mikwee