Css 如何允许这些卡组件完全覆盖空白？

当我在没有包装'div'标记的情况下呈现此组件时，ui工作正常

Hoop.js
return connectDropTarget(
            <div className="column"> <--works fine if I take this guy out
                <Card >
                    <Image src={basketball_hoop}/>
                    <Card.Content>
                        <Card.Header>
                            Matthew
                        </Card.Header>
                        <Card.Meta>
                        <span className='date'>
                          Joined in 2015
                        </span>
                        </Card.Meta>
                        <Card.Description>
                            Matthew is a musician living in Nashville.
                        </Card.Description>
                    </Card.Content>
                    <Card.Content extra>
                        <a>
                            <Icon name='user'/>
                            22 Friends
                        </a>
                    </Card.Content>
                </Card>
            </div>
);

Hoop.js
返回connectDropTarget(
我可以通过重构Hoop.js文件（不确定是否是这个词）来解决这个问题。我从组件中删除了它，并将其作为删除目标。然后，我可以a）返回而不使用周围的'div'标记，b）将其作为删除目标，这是我的初衷

最终结果：

Hoop.js
class Hoop extends React.Component {
render() {

    return (
            <Card className="column">
changed this--> <TargetHoop isOver="" projectname="www.squadstream.com"/>
                <Card.Content>
                    <Card.Header>
                        Matthew
                    </Card.Header>
                    <Card.Meta>
                    <span className='date'>
                      Joined in 2015
                    </span>
                    </Card.Meta>
                    <Card.Description>
                        Matthew is a musician living in Nashville.
                    </Card.Description>
                </Card.Content>
                <Card.Content extra>
                    <a>
                        <Icon name='user'/>
                        22 Friends
                    </a>
                </Card.Content>
            </Card>
    );
}

Hoop.js
类Hoop.Component{
render（）{
返回(
更改此-->
马修
2015年加入
马修是住在纳什维尔的音乐家。
22位朋友
);
}

}

targethopimage.js（新的拖放目标）

const hoopTarget={
坎德罗普（道具）{
返回{}
},
投掷（道具）{
console.log（props.projectname）；
}
};
功能收集（连接、监视）{
返回{
connectDropTarget:connect.dropTarget（），
isOver:monitor.isOver（）
};
}
类TargetHoop扩展了React.Component{
render（）{
const{connectDropTarget，isOver}=this.props；
返回connectDropTarget(
);
}
}
可以将column类的css粘贴到这里吗？
Hoop.js
class Hoop extends React.Component {
render() {

    return (
            <Card className="column">
changed this--> <TargetHoop isOver="" projectname="www.squadstream.com"/>
                <Card.Content>
                    <Card.Header>
                        Matthew
                    </Card.Header>
                    <Card.Meta>
                    <span className='date'>
                      Joined in 2015
                    </span>
                    </Card.Meta>
                    <Card.Description>
                        Matthew is a musician living in Nashville.
                    </Card.Description>
                </Card.Content>
                <Card.Content extra>
                    <a>
                        <Icon name='user'/>
                        22 Friends
                    </a>
                </Card.Content>
            </Card>
    );
}

  const hoopTarget = {
    canDrop(props) {
        return {}
    },

    drop(props) {
        console.log(props.projectname);
    }
};

function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver()
    };
}

class TargetHoop extends React.Component {
    render() {

        const {connectDropTarget, isOver} = this.props;
        return connectDropTarget(
            <div>
                <Image src={basketball_hoop}/>
            </div>
        );
    }
}