覆盖类名在 React 组件中不起作用答案

【问题标题】：Override Classname Not Working in React Component覆盖类名在 React 组件中不起作用
【发布时间】：2018-02-28 02:50:58
【问题描述】：

我正在尝试做一件看似简单但运气不佳的事情。我有一个使用 Grommet UX 框架的 React 应用程序。在应用程序中，我使用了一个我想要设置样式的网络聊天组件。

扣眼样式已正确应用于字体，但未应用我对网络聊天组件的自定义更改。

非常感谢任何帮助。

App.js

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

自定义.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 的屏幕截图。在右侧，您会注意到所引用的类名。

【问题讨论】：

这个网络聊天组件是您制作的（自定义）还是您正在使用的库？
这是我正在使用的库...github.com/Microsoft/BotFramework-WebChat
在这种情况下，我会敦促您检查 Chat 组件在浏览器中生成的元素。找出要更改字体的部分，然后在 CSS 中使用它们的类名。我认为您没有使用 CSS 定位正确的元素。
可能与stackoverflow.com/questions/44070162/…重复
更新显示输出截图。

标签： css reactjs

【解决方案1】：

正如DOCS 所说：

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

【讨论】：

Sagv1.感谢您的答复。我没有将 webchat 组件重新编译为项目的一部分，而只是使用提供的组件。相反，我创建了自己的自定义 css，并尝试导入此处链接中详述的 SCSS 样式。 github.com/Microsoft/BotFramework-WebChat/issues/646

【解决方案2】：

所有，我只需在聊天视图面板中设置高度和宽度即可完成这项工作，现在一切都正确显示了。

【讨论】：