Question

我正在构建一个使用Grommet UX框架的React站点。我的部分网站使用聊天控制，我想应用聊天控件的样式。问题是我的custom.css似乎没有将样式应用于Web控件，而是似乎继续尝试应用Grommet。

我到底错过了什么？

自定义CSS

customstyle{

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

这是我的app.js

import webchatstyles from '../app/custom.scss';
...
 render() {
    return (
      <App centered={false}>
        <Article>
            <Split flex='right'>
              <Section>
                <Box margin='none' pad='none'>
                  <Chat className={webchatstyles.customstyle} directLine={{secret: 'GUID.Is.Here'}} user={{id:'test', name: 'test'}}/>
                </Box>
...

Answer 1

我可以通过进行以下更改来解决此问题：

app.js：从导入语句中删除变量名称
app.js：已更改
custom.scss：将高度和宽度属性添加到.wc-chatview-panel 这样聊天窗格就会停靠在左侧屏

自定义SCSS似乎未参考

1 个答案: