Discussion on: 3 Ways You Could Customize 3rd Party React Component

[Jacob Goh]

Hi

If you are using CSS modules, you can use :global to target a CSS class name in a component.

for e.g.

/* sample.module.scss */
.wrapper :global(.a-class-inside-component) {
    padding: 1px;
}

will be compiled to CSS similar to

.wrapper_<some_random_hash> .a-class-inside-component {
    padding: 1px;
}

Hope this helps.

[yerycs]

Great. It works. Thank you for your kindly help.
Can you tell me .wrapper meaning?
For me, it works with


:global(.a-class-inside-component) {
padding: 1px;
}

Maybe .wrapper has other meaning?
Thank you.

[yerycs]

And if using this method, I have to use !important to override component.
Can you tell me if any other way is not using !important.
Thank you.

[Jacob Goh]

Since

:global(.a-class-inside-component) {
    padding: 1px;
}

will be compiled to

.a-class-inside-component {
    padding: 1px;
}

it will affect every components which uses class .a-class-inside-component globally.

If you want the CSS to be applied globally, this is alright.
If you want to scope the CSS to 1 component only, it's recommended to use a wrapper class.

[yerycs]

Thank you very much.
Should I use !important in my custom modules.scss to override css?
Is there any other way?

[Jacob Goh]

Generally, it's considered a bad practice to use important. Don't use it unless you absolutely have to.

To avoid using important => stackoverflow.com/a/27443631/5599288

[yerycs]

I will consider your words.
Thank you for your kindly help.
Hope good posts in the future.
Regards!