Question

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

我所做的是我在Grommet中创建了一个自定义样式，希望能够将我自己的设置应用于聊天控制，因为Grommet似乎已经超越了它们。我调用自己的默认scss，它有我自己的配色方案似乎有用。然后我打电话给索环。最后，我从Web Chat控件中获取了scss中的样式，并将其添加到我的custom.scss中。 custom.scss的代码如下。

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

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样式之外，我希望如何显示聊天组件

目前如何显示聊天控件 How the Chat Control appears currently

Answer 1

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

索环主题与组件上的自定义CSS混合

1 个答案: