Override CSS in React

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

you should check out reactjs.org/docs/dom-elements.html#style — Blkc
– Blkc, Commented Mar 5, 2019 at 19:03

Angel Roma · Accepted Answer · 2019-03-05 19:28:15Z

3

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

answered Mar 5, 2019 at 19:28

Angel Roma

4174 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Snoopy Over a year ago

It seems like this is just positioning the chat window and moves everything to the top. I want to make a row of chat widgets along the bottom of the screen

user27072 · Accepted Answer · 2019-03-05 19:09:20Z

1

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

answered Mar 5, 2019 at 19:09

user27072

192 bronze badges

1 Comment

Snoopy Over a year ago

I'd like to avoid downloading anything extra. I added a edit for a hard-coded way I could do it. I just don't know how to implement the syntax correctly

Collectives™ on Stack Overflow

Override CSS in React

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related