接收道具时渲染组件并将其设置为内联样式

Question

当父接收道具时，我尝试渲染组件。但是抓住错误：

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。 我使用材质ui，当图标道具为true时我需要在FloatingActionButton中渲染元素。如果我使用<Icon />，我会发现错误，以防我只使用Icon - 它会破坏，但如何应用任何样式。

const IconButton = ({color = 'normal', icon, ...props}) =>{
    let Icon = icon
    console.log(Icon)
    return <FloatingActionButton
        disableTouchRipple
        mini
        zDepth={1}
        {...props}
        {...getStyle(color, props.disabled, props.icon)}
        >
        {!!Icon && <Icon />}
        </FloatingActionButton>
}

<IconButton color='hightligted' icon={<Add />} />

此变体有效，但如何在这种情况下将样式设置为Icon：

{!!Icon && Icon}