How to edit React Node Module (react-intense) CSS?-CodePudding

Please note: My code complies successfully, and everything runs well. This is more of technical question to follow best practices.

I have installed react-intense on my React app, it's found here for more info https://github.com/brycedorn/react-intense.

The author said on the github page " Feel free to use and/or customize the provided styles in lib/ReactIntense.css."

My question is, if I need to make CSS changes, I go under node-modules, find react-intense lib folder and edit the CSS file. However when I save the CSS file no changes take affect.

I would have to take the CSS classes, add them in my App.css folder and mark them !important for them to take affect.

Why is that, I can't change the CSS directly from the lib folder under node-modules?

also, noticed on the react-intense import statement there is the following, why is that?

Screenshot from VS CODE

import React from 'react';
import ReactIntense from 'react-intense';


export default function Aboutcontent() {
return 

    <section id="intro2">
    <div >
        <div >
        <ReactIntense title="Fusion Apothecary"  caption="NYC" src={require('../images/Fusion31.jpg')} alt="Compounding" />
            </div>
            
            <div >
        <ReactIntense title="Fusion Apothecary"  caption="NYC" src={require('../images/Fusion36.jpg')} alt="Compounding" />


            </div>
            <div >
        <ReactIntense title="Fusion Apothecary"  caption="NYC" src={require('../images/Fusion55.jpg')} alt="Compounding" />


            </div>
            <div >
        <ReactIntense title="Fusion Apothecary"  caption="NYC" src={require('../images/Fusion56.jpg')} alt="Compounding" />


            </div>
            </div>
            </section>

;
}

CodePudding user response：

Since this library has no built in way to modify default styling (usualy done through props), you can only override styles with "!important", because modifying node modules would only affect your site locally, but if you published it on lets say netlify, all the changes would be lost because netlify would run "npm i" and download original code. You can ignore the warning from your screenshot because it's yust complaining that the module has no type declarations.

CodePudding user response：

you can use css Specificity, rather than overwrite css class directly, overwrite with css query selector,

ex; if you want to overwrite x class, and x have parent y then

.y .x{
 #your stiyle
}

In this way you are specifying your css, this will have high priority.