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.

hackape · Accepted Answer · 2020-03-16 09:31:08Z

1

style.module.css

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

Then your jsx goes:

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

answered Mar 16, 2020 at 9:31

hackape

20.3k2 gold badges34 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user8989 Over a year ago

What does global refer to

user8989 Over a year ago

That syntax of style.module.css you showed is showing error

hackape Over a year ago

maybe we are using different flavor of css module syntax. That :global is telling the css module to un-suffix the css classname ".parent". Without it, css module system by default output sth like ".parent-2a8fb". I'm not sure which flavor you use, check the doc.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related