loading...

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

Collapse
yerycs profile image
yerycs

Hello, thanks for your post.
About first case, if I use styles.modules.scss, then how can I override css?
If you tell me about this, I will appreciate it.
Thank you.

Collapse
jacobgoh101 profile image
Jacob Goh Author

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.

Collapse
yerycs profile image
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.

Thread Thread
yerycs profile image
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.

Thread Thread
jacobgoh101 profile image
Jacob Goh Author

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.

Thread Thread
yerycs profile image
yerycs

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

Thread Thread
jacobgoh101 profile image
Jacob Goh Author

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

Thread Thread
yerycs profile image
yerycs

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