覆盖在反应组件

Question

我正试图做一件看似简单的事，但没有太多运气。我有一个使用Grommet UX框架的React应用程序。在应用程序中，我使用了一个我喜欢的Web Chat组件。

正确地将索环样式应用于字体，但我的网络聊天组件的自定义更改未应用。

非常感谢任何帮助。

App.js

import  '../scss/custom.scss';
...
class PatientApp extends React.Component {
...
render() {
...
<Chat className='wc-app' directline='GUID_Entered_Here />

Custom.scss

    @import 'elu.defaults.scss';
    @import '~grommet/scss/grommet-core/index.scss';

    body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
        font-family: 'Segoe UI', sans-serif;
        font-size: 15px;
        background-color: #2AD2C9;
    }

.wc-chatview-panel {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    font-style: #2AD2C9;
}

.wc-header {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    font-style: #2AD2C9;
}

.wc-message-pane {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    font-style: #2AD2C9;
}

下面是一个屏幕截图，显示了运行我的代码时的输出HTML。在右侧，您将注意到引用的classNames。

Answer 1

正如DOCS所说：

  

在/ src / scss /文件夹中，您将找到用于生成的源文件   /botchat.css。运行npm run build-css进行编译后再进行编译   变化。对于基本品牌，请更改colors.scss以匹配您的颜色   方案。对于高级样式，请更改botchat.scss。

Answer 2

全部， 我能够让这个工作只需在chatview面板中设置高度和宽度，现在一切都正确显示。