Passing along styles for individual messages

[mberkeland]

I'd like to be able to add a custom style to individual messages (based on content... for example, a message indicating an error could be red). I have implemented this very simply in your code, but would like to offer the changes if you'd like for the component.

I added a "msgstyle" prop in MessagesList.vue:

      <message-own
        v-if="message.id === authorId"
        :msgstyle="message.msgstyle"
        :date="message.date"
        :image-url="message.imageUrl"
        :contents="message.contents"
      />
      <message-foreign
        v-else
        :msgstyle="message.msgstyle"
        :author="message.author"
        :date="message.date"
        :image-url="message.imageUrl"
        :contents="message.contents"
      />

And then added this in MessageForeign.vue and MessageOwn.vue:

added to props in each:

    msgstyle: {
      type: String,
      default: "",
      required: false,
    },

Then simply added into message__contents div:
<div class="message__contents" :style="msgstyle">
Of course, there is no error checking in this example, it is incumbent on the user to pass a valid "style". But, for me, this made the component much, much more flexible!

Thanks for the simple, elegant control!

[jmaczan]

Hello,
I don't actively maintain this component, so I archive the repository. If you would like to help with maintaining, please let me know.