Can't use props 'styles' in React

[mr-teddy-bear]

Describe the bug

When i try use props "styles" from my chat, i get error "[Vue warn]: Invalid prop: type check failed for prop "styles". Expected Object, got String with value "[object Object]"."

My component

Error in console

My styles, which i try for use

Please, help me)

[antoine92190]

Hi, First your styles object is not correct, it should look like this:

styles="{
  general: {
    color: '#0a0a0a',
    colorSpinner: '#333',
    borderStyle: '1px solid #e1e4e8'
  },

  footer: {
    background: '#f8f9fa',
    backgroundReply: 'rgba(0, 0, 0, 0.08)'
  },

  icons: {
    search: '#9ca6af'
  }
}"

Second, you need to check this repo for React compatibility example: https://github.com/antoine92190/vue-advanced-chat-sandbox/tree/react You will need to use reactify-wc package to make it work. If you manage to make the chat work with React in a more simple way, I would be glad to know how.

[mr-teddy-bear]

Reactify-wc not working with React 17+ I can't use reactify Maybe you know other way for using 'styles', because if I use styles like in your example, it's also not worked, and i get same error about [Object object]

[antoine92190]

You need to use an alternative to reactify-wc if it’s not working. I don’t know which one, but you can try to find one. Otherwise you can also change styles by overriding CSS classes

[antoine92190]

You can also check this, someone seems to have a working solution for that: https://stackoverflow.com/a/69672662

[antoine92190]

This issue will be fixed in the next migration of this plugin, which will become focused on web component only.