How to override default css of rasa webchat

Hi all, I am trying to customize css of profile Image in rasa webchat. I imported App.css in my App.js file . but when I test it, default css values are overriding my css values. How can I change this ?

App.css have my css values

How and where you refer to app.css file?

I use it in my app.js file

import Widget from 'rasa-webchat';
import './App.css'

function App() {
  return (
    <div className="App">
      customData={{"language": "en"}} 

export default App;

how about adding semicolon to end?

import ‘./App.css’;

@InnoOmnia JavaScript semicolons are optional. but I still tried, did not work

Hi @Loki, Right. Its easy peasy!

Solution 1: You can directly mention the css code in the Rasa Webchat snippet which is every easy, please see this tutorial video: Best Ways To Customize Rasa-webchat - YouTube

Solution 2: If you have a project folder (clone from the Rasa Webchat) and running on npm server node 3000 I guess for ReactJS app; then the process is all different.

But, If you only using the Rasa Webchat Snippet code and want to customise using your own CSS, then please follow my solution thread: Integrating Chatbot-Widget (( ) to a Wordpress site? - #7 by nik202

Please ask me endless question on this!