I've been working on conditional rendering and discovered that the culprit might be the outer parent <div> tag. After removing the conditional rendering, I noticed that my card styling was being affected. Below are screenshots showing the difference with and without the parent div tag.
return (
<div>
<div className="card" id="chatcard">
<div className="card-body">
<h5 className="card-title">{this.props.user.user}</h5>
<div className="card-text">
<ChatList
user={this.props.user}
socket={this.props.socket}
currentUser={this.props.currentUser}
/>
</div>
</div>
<div className="card-footer">
<small className="text-muted">
<form>
<ChatField
user={this.props.user}
socket={this.props.socket}
chatusers={this.props.index}
/>
</form>
</small>
</div>
</div>
</div>
);
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
/* Add your unique custom CSS styles here */
https://i.sstatic.net/EmCqy.pnghttps://i.sstatic.net/Q5prS.png