代码之家 › 专栏 › 技术社区 › jgoraya

重写类名在React组件中不起作用

reactjs css

jgoraya · 技术社区 · 9 年前

套圈样式已正确应用于字体,但我对网络聊天组件的自定义更改未被应用。

应用程序。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。在右边,您会注意到被引用的类名。