Override CSS in React - css

Question

I am using Wolox's chat widget
https://github.com/Wolox/react-chat-widget
And I am trying to make a horizontal row of multiple chat widgets along the bottom of the screen. I am trying to override the class .rcw-widget-container
.rcw-widget-container {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 20px 20px 0;
max-width: 370px;
position: fixed;
right: 0;
z-index: 1;
}
I have two chat Widget's that I want to put side by side, but I want to do it inline with React. Because my number of widgets will grow depending on how many user chats I open. So the right positioning needs to be dynamic. I just don't know how to accomplish this. Or if it's possible
https://codesandbox.io/s/vvnjyr9r30
EDIT
Something like this may work, but I don't think I am getting the syntax right.
.chat1 .rcw-widget-container {
right: 350px;
}
.chat2 .rcw-widget-container {
right: 400px;
}
Component
<Widget className="chat1" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
<Widget className="chat2" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />

Answer 1

as I can understand probably you are looking for something like this:
In this case you can try:
.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
}
.rcw-widget-container {
border: 2px red solid;
position: initial;
}
Also, try to reorder the imports in index.js to override the styles.
import "react-chat-widget/lib/styles.css";
import "./styles.css";

Answer 2

While not inherently possible in CSS modules alone, the author of the react-toolbox library has actually solved this particular problem very nicely
Read their github docs which are more in depth on the subject at https://github.com/react-toolbox/react-toolbox#customizing-components
A list of the themeable classes for a particular component is given on the component demo page on their site too