如何为导入的npm模块即jsoneditor自定义CSS

问题描述

对于自定义通过npm导入的所有模块，这可能是一个普遍的问题，但我想着重介绍jsoneditor。

我正在使用嵌入式jsoneditor的反应：

package.json
.....
"jsoneditor": "latest","jsoneditor-react": "latest"

这是我的js文件：

 <jsoneditor value={this.props.root} mode="view"/>

现在为了自定义CSS，我定义了以下覆盖：

.jsoneditor-frame {
  background: $input-bg !important;
}

.jsoneditor-menu {
  background-color: $dialog-color !important;
  border-bottom: 1px solid $navbar-border-color !important;
}

显然这不是正确的方法。

npm import还为sass安装了jsoneditor个文件，我可以导入它们，然后webpack会对其进行编译：

@import“〜jsoneditor / src / scss / jsoneditor.scss”;

但是没有效果。...

我是整个JavaScprit世界的新手。有人可以向我指出有关jsoneditor随附的自定义CSS的正确方法的正确方向吗？

解决方法

快捷方法：npm软件包，如果附带.sass或.less之类的东西，通常还会附带已编译的.css文件。您可以在node_modules的程序包文件夹中的某个位置找到它们。您可以直接在此处修改某些内容。

也很肮脏但又不是肮脏的方式：在浏览器中检查导入的元素也可以将您带到正确的CSS id / className，然后可以将其覆盖。