css - 在 React 中覆盖 CSS

Question

我正在使用 Wolox 的聊天小部件 https://github.com/Wolox/react-chat-widget

我正在尝试在屏幕底部水平排列多个聊天小部件。我正在尝试覆盖类 .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;
}

我有两个聊天小部件，我想并排放置，但我想与 React 内联。因为我的小部件数量会根据我打开的用户聊天数量而增长。所以 right 定位需要是动态的。我只是不知道如何做到这一点。或者如果可能的话

https://codesandbox.io/s/vvnjyr9r30

编辑

这样的东西可能有用，但我认为我的语法不正确。

.chat1 .rcw-widget-container {
    right: 350px;
}

.chat2 .rcw-widget-container {
    right: 400px;
}

组件

<Widget className="chat1" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
<Widget className="chat2" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />

Answer 1

据我所知，您可能正在寻找这样的东西:

在这种情况下你可以尝试:

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: row;
}

.rcw-widget-container {
  border: 2px red solid;
  position: initial;
}

此外，尝试在 index.js 中重新排序导入以覆盖样式。

import "react-chat-widget/lib/styles.css";
import "./styles.css";