How do I change the style used in an NPM package?

user_13072014 0
Viewed 1246

This might be a stupid or wrong question but what is the scope of an NPM package's default styling? If I'm using an NPM package but want to modify the color of one of their displays how do I got about doing that?

In my own index.css file and in the package's css file I've changed a background color of one of the divs. It works in my local environment but not in deployment-- it reverts back to the default.

In my index.css file:

.react-slideshow-container + div.indicators > .each-slideshow-indicator {
  width: 7px;
  height: 7px;
  margin: 0 5px 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

In my node-modules/react-slideshow-image/components/general.css file:

.react-slideshow-container + div.indicators > .each-slideshow-indicator {
  width: 7px;
  height: 7px;
  margin: 0 5px 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}
npm reactjs css
1 Answers

This is correct. I wouldn't edit the node module directly. However, you should increase specificity to prioritize your custom CSS. For example:

.your-custom-container .react-slideshow-container + div.indicators > .each-slideshow-indicator {
  width: 7px;
  height: 7px;
  margin: 0 5px 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

In the event that in the production site the style sheet does not reflect right away, consider refreshing your cache as necessary (e.g., ctrl+f5).

user_86808050
Related