How to customise css for imported npm module (ie. jsoneditor)

Question

This is probably general question for customising all modules imported over npm, but I would like to concentrate on jsoneditor.

I'm using react with embedded jsoneditor:

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

And here is my js file:

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

Now in order to customise css I've defined following overwrites:

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

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

Obviously this is not the right way to to.

npm import installed also sass files for jsoneditor I can import them and webpack would compile it:

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

But it has no effect....

I'm new to this whole JavaScprit world. Could someone point me to right direction about proper way of customising css that comes with jsoneditor?

Answer 1

The quick-and-dirty way: npm packages, if they come with something like .sass or .less, very often also come with the compiled .css files. You can find those somewhere in the package's folder in node_modules. You could potentially modify something there directly.

The also-quick-and-dirty-but-not-as-dirty-way: Inspecting your imported elements in the browser can also lead you to the correct css id/className, which you can then overwrite.