如何为导入的npm模块自定义css (即jsoneditor)

Question

这可能是定制通过npm导入的所有模块的一般问题，但我想集中在jsoneditor上。

我正在使用带有嵌入式jsoneditor的react

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还为jsoneditor安装了sass文件，我可以导入它们，然后webpack会编译它：

@import "~jsoneditor/src/scss/jsoneditor.scss"；

但它没有任何效果...

我对整个JavaScprit世界都很陌生。有没有人能给我指个方向，告诉我jsoneditor自带的css的正确定制方式？

Answer 1

快捷方法: npm包，如果它们附带了.sass或.less之类的东西，通常也会附带编译后的.css文件。您可以在node_modules中的包文件夹中找到这些文件。你可以直接在那里修改一些东西。

在浏览器中检查导入的元素也可以找到正确的css id/className，然后可以覆盖它。