css - 扣眼主题与组件上的自定义CSS混合

我正在构建一个使用Grommet作为UX框架以及嵌入式聊天控件的React网站。一切功能都很好，但是布局有很多需要（下面的第二张图片）。在链接中，您将在左侧区域中看到聊天框。这与原始形式的聊天控件有很大的不同（下面的第一个屏幕截图）。如您所见，两者之间的差异是相当大的距离。我想将Grommet主题保留在文本上，但希望保持在本地聊天控件中找到的间距和其他元素。

我所做的是我在Grommet中创建了一种自定义样式，希望能够将自己的设置应用于聊天控件，因为Grommet似乎覆盖了它们。我将自己的默认默认名称称为scss，它具有自己的配色方案，可以正常工作。然后我叫索环。最后，我从Web Chat控件中获取了scss中的样式，并将其添加到我的custom.scss中。下面是custom.scss的代码。

能够设置我的代码的最佳方法是什么，以便我可以控制Chat控件的外观和布局，同时仍然保留一些重要的索环样式（例如，字体，颜色等）。

Custom.scss

@import 'elu.defaults.scss';
@import '~grommet/scss/grommet-core/index.scss';
@import "includes/colors";
@import "includes/settings";
@import "includes/card-size";

/* updating put the original version in zzz_archive*/

chatstyle {

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

    .wc-app button {
        background-color: $c06;
        border: 1px solid $c05;
        border-radius: 1px;
        color: $c01;
        cursor: pointer;
        outline: none;
        transition: color .2s ease, background-color .2s ease;
    }

    .wc-app h1, .wc-app h2, .wc-app h3, .wc-app h4, .wc-app p, .wc-app ul, .wc-app ol {
        margin: 0;
        padding: 0;
    }

    .wc-app audio, .wc-app video {
        display: block;
    }

    .wc-console > * {
        position: absolute;
        top: 0;
        vertical-align: middle;
    }

    .wc-console label {
        cursor: pointer;
        display: inline-block;
        height: 40px;
    }

    .wc-console svg {
        fill: $c03;
        margin: 11px;
    }

    .wc-console textarea, .wc-console input[type=text] {
        border: none;
        height: 100%;
        outline: none;
        padding: 0;
        resize: none;
        width: 100%;
    }

    .wc-send svg {
        height: 18px;
        width: 27px;
    }

    .wc-upload svg {
        height: 18px;
        width: 26px;
    }

    #wc-upload-input {
        display: none;
    }

    .wc-textbox {
        bottom: 0;
        left: 48px;
        right: 49px;
    }

    .wc-send {
        right: 0;
    }

    .wc-send.hidden {
        visibility: hidden
    }

    .wc-mic {
        right: 0;
    }

    .wc-mic.hidden {
        visibility: hidden
    }

    .wc-mic.active path#micFilling {
        fill:rgb(78, 55, 135)
    }

    .wc-mic.inactive path#micFilling {
        visibility: hidden
    }

    .wc-console.has-text .wc-send svg {
        fill: $c07;
    }

    .wc-message-from-me {
        float: right;
        margin-right: 6px;
    }

    .wc-message-from-me.wc-message-from {
        text-align: right;
    }

    .wc-message-from-me .wc-message-content {
        background-color: $c_messageFromMe;
        color: $c01;
    }

    .wc-message-from-me svg.wc-message-callout path {
        fill: $c_messageFromMe;
    }

    .wc-message-from-me svg.wc-message-callout path.point-left {
        display: none;
    }

    .wc-message-from-me svg.wc-message-callout {
        right: -6px;
    }

    .wc-message-from-bot {
        float: left;
        margin-left: 8px;
    }

    .wc-message-from-bot .wc-message-content {
        background-color: $c_messageFromThem;
        color: $c00;
    }

    .wc-message-from-bot svg.wc-message-callout path {
        fill: $c_messageFromThem;
    }

    .wc-message-from-bot svg.wc-message-callout path.point-right {
        display: none;
    }

    .wc-message-from-bot svg.wc-message-callout {
        left: -6px;
    }


};

App.js ...

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from 'grommet/components/App';
    import Article from 'grommet/components/Article';
    import Section from 'grommet/components/Section';
    import Split from 'grommet/components/Split';
    import Box from 'grommet/components/Box';
    import {Chat} from 'botframework-webchat';
    import '../scss/custom.scss';

    class PatientApp extends React.Component {
    ...
      render() {
        return (
          <App centered={false}>
            <Article>
                <Split flex='right'>
                  <Section>
                    <Box margin='none' pad='none'>
                      <Chat style={'chatstyle'} directLine={{secret: 'My GUID'}} user={{id:'jesse', name: 'jesse'}}/>
                    </Box>
...

除了Grommet样式外，我希望聊天组件如何显示


聊天控件当前的显示方式

最佳答案

所有，
我能够弄清楚这一点。现在，在样式名称.wc-chatview-panel中设置宽度和高度时，它现在可以正确显示正确的按钮布局。