I'm not sure if defining all the styles at the top is the best idea - they should be defined closer to where they are used (before if (messageInfo.type === messageTypes.TEXT) {).

But there's more important issue here: if we should simplify this code even further. In one path we render

<div className={lastMsgCls}>
        {usernameText}
        {messageTitle}
      </div>

which differs by only usernameText from the last return. This is a great opportunity for simplification, because let usernameText = null; can be moved outside the if which will result in return being called after the if. That will also affect where the styles should be defined.

This diff already refactors and fixes the code, so I'm going to request changes. We can refactor and fix in the same diff, but finding a way to split it will be really appreciated.