我正在使用 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())} />
最佳答案
据我所知,您可能正在寻找这样的东西:
在这种情况下你可以尝试:
.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";
关于css - 在 React 中覆盖 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55009776/