How to override external module class with css module pattern in react

Question

I want to override a external module cssclass locally for a component

In my code

import `style` from './style.module.css' // this is local css module 
import `ExternalComponent` from 'ExternalComponent' // suppose this is external module i'm using 

    function Component(){
        return(
               <ExternalComponent/>
             )
    }

Now the ExternalComponent render a div element with a class parent. So if i am importing the ExternalComponent how can i override the parent class of ExternalComponent in my locally imported style module so that the style in the ExternalComponent change only for this component only and else where i'm using it does not change.

I'm using react by the way.

Answer 1

style.module.css

.whatever-name-scope {
  :global {
    .parent {
      // override here
    }
  }
}

Then your jsx goes:

function Component(){
  return (<div className={style.whateverNameScope}>
    <ExternalComponent/>
  </div>)
}