Javascript 如何为导入的npm模块(即jsoneditor)定制css

Javascript 如何为导入的npm模块(即jsoneditor)定制css,javascript,reactjs,jsoneditor,Javascript,Reactjs,Jsoneditor,这可能是定制通过npm导入的所有模块的一般问题,但我想集中讨论jsoneditor 我正在使用react with embeddedjsoneditor: package.json ..... "jsoneditor": "latest", "jsoneditor-react": "latest" 这是我的js文件: <JsonEditor value={this.props.root} mode=&quo

这可能是定制通过
npm导入的所有模块的一般问题,但我想集中讨论
jsoneditor

我正在使用react with embedded
jsoneditor

package.json
.....
"jsoneditor": "latest",
"jsoneditor-react": "latest"
这是我的
js
文件:

 <JsonEditor value={this.props.root} mode="view"/>
显然,这不是正确的方法

npm import
也安装了
sass
文件,用于
jsoneditor
我可以导入它们,webpack将编译它们:

@导入“~jsoneditor/src/scss/jsoneditor.scss”

但它没有效果


我对整个JavasPrit世界都是新手。有人能给我指出一个正确的方向,那就是如何正确定制jsoneditor附带的css吗?

快速而肮脏的方式:npm包,如果它们附带.sass或.less之类的东西,通常也会附带编译后的.css文件。您可以在node_模块中的包文件夹中找到它们。您可以直接在那里修改某些内容


同样快速、肮脏但不那么肮脏的方式:在浏览器中检查导入的元素也可以引导您找到正确的css id/类名,然后您可以覆盖它。

在我的例子中,jsoneditor的npm包附带sass,但将其导入到我的项目中没有任何效果,它仍然引用提供css文件…您正在使用webpack吗?对于这种特殊的样式表,您可能需要加载
.jsoneditor-frame {
  background: $input-bg !important;
}

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