CODEWITHSUNDEEP
cssreactjs
Snoopy
Snoopy

Reputation: 1357

Override CSS in React

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())} />

Upvotes: 3

Views: 9778

Answers (2)

Angel Roma
Angel Roma

Reputation: 417

as I can understand probably you are looking for something like this:

enter image description here

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";

Upvotes: 3

user27072
user27072

Reputation: 19

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

Upvotes: 1

Related Questions