在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

虽然不能仅在CSS模块中固有地实现，但是react-toolbox库的作者实际上已经很好地解决了这个特定问题

在https://github.com/react-toolbox/react-toolbox#customizing-components

上阅读有关该主题的更深入的github文档。

特定组件的主题类列表也位于其站点上的组件演示页面上

Answer 2

据我了解，您可能正在寻找这样的东西：

在这种情况下，您可以尝试：

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